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中的数据时，它会显示错误，

＆＃34;无法读取属性＆＃39; name＆＃39;未定义＆＃34;

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

Answer 2

当你调用{{conversation.user}}但是你给它一个对象时，你使用的任何模板语言都可能期望一个字符串。所以当模板引擎试图回显＆＃34;字符串＆＃34;你传递给它，但只是针对conversation.user时它不会是一个字符串。因此错误

请改为{{conversation.user.name}}

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

{{conversation.user && conversation.user.name}} 或者像把手这样的东西就像这样

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

Answer 3

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

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

3 个答案: