Vue - 尝试显示嵌套对象中的数据时呈现错误答案

【问题标题】：Vue - error in render when trying to display data from nested objectVue - 尝试显示嵌套对象中的数据时呈现错误
【发布时间】：2018-07-25 22:38:30
【问题描述】：

我正在处理 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 团队中没有员工。这到底是什么问题？是否可以像这样显示嵌套对象的属性还是应该避免它？

【问题讨论】：

问题不在于嵌套对象，而在于其他地方。您的循环看起来不错，示例数据看起来不错，因此问题必须在于您从 API 返回的数据/您在状态中设置该数据的方式。您能否发布 API 调用的准确响应？另外，发布paginatedList的内容。
已编辑，从 paginatedList 添加一项（名称混淆）
在您的分页数据中，teamDto 不存在。当您访问 item.{something} 时，它会访问该对象的属性，因此该道具需要存在。
另外，您的数据中有错字：taem in specialization。
Ups，对不起，它发生在多个页面上，我在代码中使用的数据与响应数据不同。所以，解释员工 => 团队，培训 => teamDto

标签： html json vue.js vuex

【解决方案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"。

【讨论】：

【解决方案2】：

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

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

我猜这就是它无法呈现未定义名称的原因。

【讨论】：

这是 BE 方面的错字