TypeError: Cannot read eager loaded property of undefined

Question

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

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

我的模板是这样的：

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

但是，如果我尝试将其放入图像 src 中，则不会显示任何错误，但一切都会消失，在 DOM

中看起来像这样

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

数据存在于vue dev工具中，我也尝试过<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"
}}

Answer 1

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

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

因为 Vue 的工作方式与我使用的 React 不同，语法实际上是：

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

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

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

TypeError: Cannot read eager loaded property of undefined

TypeError: Cannot read eager loaded property of undefined

javascript

php

eager-loading

laravel

vue.js