Question

我正在处理Vue中的一个奇怪问题。我正在尝试在表格中显示员工列表。员工由REST服务提供，响应看起来与此完全相同（如下所示是paginatedList中的一项）：

{
  "id": 10a,
  "code": 0000,
  "firstName": "John",
  "lastName": "Doe",
  "level": "WORKER",
  "specialization": {
    "id": 20,
    "name": "Default",
    "taem": {
      "id": 2,
      "name": "Builders",
      "system": false,
      "teamLead": null,
      "specializationDtos": null,
      "categoryDtos": null
    }
  },
  "team": {
    "id": 2,
    "name": "Builders",
    "system": false,
    "teamLead": null,
    "specializationDtos": null,
    "categoryDtos": null
  },
  "coachDto": null,
  "roles": [
    "DL"
  ]
}

在Vue中，我正在使用Vuex操作来预处理原始数据并返回分页的员工列表。然后我尝试使用v-for在表中打印它，如下所示：

<tr v-for="item in paginatedList" :key="item.id"
  v-on:click="selectRow(item)"
  v-bind:class="{selectedRow: selectedItem === item}"
>
  <td>{{item.id}}</td>
  <td>{{item.name}}</td>
  <td>{{item.team.name}}</td>
</tr>

这就是它失败的地方（有点）。即使显示的表没有员工错过团队名称，我也会收到来自Vue的警告：

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

点击导致警告的代码行后，它指向我正在尝试呈现的地方{{item.team.name}}

我的第一个想法是，缺少团队的员工根本就没有显示出来。为了检查它，我提出了以下解决方法：

<td>{{getTeamName(item.team)}}</td>

方法：

getTeamName(team) {
  return (team ? team.name : 'FAILED');
}

警告/错误消失，但没有FAILED团队的员工。究竟是什么问题呢？是否可以显示那样的嵌套对象的属性，还是应该避免它？

Answer 1

当您的迭代对象尚未拥有您期望的数据时，可能会发生这种情况，但是当您调试它时，确实如此。在使用您从承诺中获得的数据时，我经常会发现这种情况。考虑到这一点，只需添加一个检查以确保您的数据已正确加载，在您的情况下，这应该足够了：

<tr v-for="item in paginatedList" :key="item.id"
  v-on:click="selectRow(item)"
  v-bind:class="{selectedRow: selectedItem === item}"
>
  <div v-if="item.team">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.team.name}}</td>
  </div>
</tr>

我的组件上通常有一个dataLoaded道具，它被初始化为false，但是一旦我弄乱了我的数据以避免这样的问题，就设置为true。然后，我会检查整个组件周围的v-if="dataLoaded"。

Answer 2

似乎您的对象中的团队拼写错误：

 "taem": {
      "id": 2,
      "name": "Builders",
      "system": false,
      "teamLead": null,
      "specializationDtos": null,
      "categoryDtos": null
    }

我猜这就是为什么它不能呈现未定义名称的原因。

Vue - 尝试显示嵌套对象

2 个答案: