javascript - 无法访问 Vue 组件内对象中的数据

Question

我不明白为什么我无法访问 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 中的数据时，它显示错误，

"Cannot read property 'name' of undefined"

这是我的 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>

Answer 1

当数据被异步检索时，它不会立即定义。因为您正在引用

conversation.user.name

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

通常，使用防护装置可以轻松避免这种情况。

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