无法访问 Vue 组件内对象中的数据答案

【问题标题】：Can't access data in an object within a Vue component无法访问 Vue 组件内对象中的数据
【发布时间】：2017-12-31 17:40:11
【问题描述】：

我不明白为什么我无法访问 user 对象中的数据。

{
  "channel_id": 2,
  "user": {
    "id": 1,
    "name": "Clyde Santiago",
    "email": "dexterdev02@gmail.com",
    "created_at": "2017-07-25 08:10:58",
    "updated_at": "2017-07-25 08:10:58"
  },
  "message": "ssd"
}

访问channel_id、user、message 很好。但是当我访问user 中的数据时，它会显示错误，

“无法读取未定义的属性‘名称’”

这是我的 Vue 组件中的 HTML

<ul class="list-group">
  <li class="list-group-item" v-for="conversation in conversations">
    <p>
      {{conversation.message}}
    </p>
    <small>{{conversation.user.name}}</small> // error here
  </li>
</ul>

【问题讨论】：

什么错误，这些数据是异步检索的？
您要访问哪些数据？ {{conversation.user}} 是一个对象，所以它应该给出 [object Object]。 {{conversation.user.id}} 会给出用户 ID 等
"Cannot read property 'name' of undefined" 这就是错误。我正在使用推送器
当我访问 {{conversation.user}} 时很好。但是当我访问 {{conversation.user.name}} 时，它显示错误“无法读取未定义的属性'名称'”
这并不意味着 name 未定义。这意味着user 是。

标签： javascript vue.js vue-component

【解决方案1】：

当您调用{{conversation.user}} 时，您使用的任何模板语言都可能需要一个字符串，但您给它的是一个对象。因此，当模板引擎尝试回显您传递给它的“字符串”时，但仅针对 conversation.user.. 时它不会是字符串。因此出现错误

试试这个{{conversation.user.name}}

如果信息是异步加载的，您可能需要先检查user 对象是否存在。所以要做到这一点，它会是这样的：

{{conversation.user && conversation.user.name}} 或者对于车把之类的东西，它会是这样的

{{#if conversation.user}}
    {{conversation.user.name}}
{{/if}}

【讨论】：

这就是错误。访问 {{conversation.user}} 很好。但是当 {{conversation.user.name}} 显示错误“无法读取未定义的属性 'name'”
是异步加载的吗？
我赞成它。我认为这是正确的。批准的答案类似
我投了反对票，因为最初的答案不正确。你已经纠正了它。这个问题被标记为 Vue 并且车把是无关紧要的。

【解决方案2】：

如此处所示，用户本身是一个对象，而不是可打印的值。您是否尝试过单独访问其属性，例如 {{conversation.user.name}}？

【讨论】：

N00b 没有得到这个：我的答案被否决了，因为它回答了原始问题，该问题后来被大量编辑？那么，否决票的价值是什么？
问题被大量（这不是我所说的严重）编辑，因为它不清楚。回答不清楚的问题时，您可能会遇到错误问题的正确答案。

【解决方案3】：

当异步检索数据时，它不是立即定义的。因为你引用了

conversation.user.name

在模板中，有时user 没有定义，这会导致您的错误。

通常这很容易通过警卫避免。

{{conversation.user && conversation.user.name}}

【讨论】：