【实战中的问题】VUE中，HTML对象的ID，在mounted中根据ID无法获取到对象

Posted 2023-04-18

参考技术A

问题： html对象的ID, 在mounted中用ID获取对象却获取不到对象
原因： 与vue的渲染顺序有关，在mounted执行时，dom其实并没有渲染完成，所以，在mounted中用动态的ID获取对象是获取不到的。
解决： 用vue提供的$nextTick

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

【中文标题】Vue - 尝试显示嵌套对象中的数据时呈现错误

【英文标题】：Vue - error in render when trying to display data from nested object

【发布时间】：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

【参考方案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 方面的错字