TypeError：无法读取未定义的急切加载的属性答案

【问题标题】：TypeError: Cannot read eager loaded property of undefinedTypeError：无法读取未定义的急切加载的属性
【发布时间】：2019-11-07 09:57:08
【问题描述】：

我可以像 $comments = Comment::with(['replies', 'user'])->get(); 这样使用 laravel 急切加载值，将其传递给 vue 并显示它，但随后出现错误消息：

"TypeError: Cannot read property 'avatar' of undefined"

我的模板如下所示：

<template><li>
    {{comment.user.avatar}}
</li></template>

但是，如果我尝试将其放入图像 src 中，则不会显示错误，但所有内容都会消失并且在 DOM 中看起来像这样

<li data-v-5ca803bb="">
    <!---->
</li>

数据存在vue开发工具中，我也试过<a href="{{comments.user.avatar}}"></a> 而且没有用，我不知道为什么我不能把它放在任何属性中

评论对象：

{"id":4,
"user_id":1,
"textField":"oiuio",
"created_at":"2019-11-06 10:52:10",
"updated_at":"2019-11-06 10:52:10",
"replies":[],
"user":{
    "id":1,
    "name":"Dominykas",
    "email":"s@gmail.com",
    "avatar":"https://www.pixelstalk.net/wp-content/uploads/2016/08/Cute-Girl-Images.jpg",
    "provider":"google",
    "provider_id":"11185022391312255843258",
    "email_verified_at":null,
    "created_at":"2019-11-05 22:18:24",
    "updated_at":"2019-11-05 22:18:24"
}}

【问题讨论】：

不，它是单数，我最好改变它并提供数据对象
试试dd(comment)，看看是否有user的值。
不幸的是，它确实
用户没有评论。检查comment.user
如果我显示{{comment.user}}我没有错误只有一个数组，如果我显示{{comment.user.avatar}}我得到价值，也提到了错误

标签： javascript php laravel vue.js eager-loading

【解决方案1】：

首先，我无法为这样的属性添加任何内容：

<img src="{{comments.user.avatar}}"></img>

因为 Vue 的工作方式与我在 react 中使用的不同，所以语法实际上是：

<img :src="comments.user.avatar"></img>

其次，我有类型错误，因为确实，正如人们指出的那样，我缺少用户实例，但是它不在提供的模板示例中，而是在我的意大利面条代码中。

建议：最好将关注点分开并创建几个不同的组件，而不是尝试使用一个并在各处设置标志并得到这样的错误，小心。

【讨论】：