如何在Vue表格中遍历嵌套对象与数组并展示指定字段？

问题分析 #

你当前的代码存在三个核心问题：

1. v-for 参数顺序颠倒，导致遍历的元素和索引/键混淆
2. td 标签的 class 属性存在拼写错误
3. 循环的 key 值设置不规范，可能引发渲染警告

修正后的代码 #

假设你的 networkAudiences 是数组嵌套数组的结构（外层为分组，内层为单条数据），修正后的代码如下：

<tbody class="network_Audience" v-for="(group, groupIndex) in networkAudiences" :key="groupIndex">
  <tr v-for="(data, dataIndex) in group" :key="`${groupIndex}-${dataIndex}`">
    <td class="text-center data-column">
      {{ data.source }}
    </td>
    <td class="text-center data-column">
      {{ data.accountId }}
    </td>
    <td class="text-center data-column"> 
      {{ data.name }} 
    </td>
    <td class="text-center data-column"> 
      {{ data.sourceId }} 
    </td>
  </tr>
</tbody>

如果 networkAudiences 是对象嵌套数组的结构（外层为分组对象，键为分组标识），则调整为：

<tbody class="network_Audience" v-for="(group, groupKey) in networkAudiences" :key="groupKey">
  <tr v-for="(data, dataIndex) in group" :key="`${groupKey}-${dataIndex}`">
    <!-- 同上的td内容 -->
  </tr>
</tbody>

关键修正点说明 #

• 调整 v-for 参数顺序：Vue 中 v-for="(value, key/index) in iterable" 的第一个参数是遍历到的元素，第二个是键（对象）或索引（数组）。原代码的参数顺序颠倒，导致你无法正确获取到目标数据。
• 修复 class 拼写错误：将 <tdlass 和 <td lass 修正为 <td class，确保样式正常生效。
• 规范 key 值：内层 tr 的 key 使用分组标识+数据索引的组合值，避免不同分组中相同索引导致的 key 重复问题，符合 Vue 的渲染规范。

额外提示 #

如果你的数据层级更深（比如目标字段嵌套在对象的子属性中），需要根据实际数据结构调整取值路径，例如 data.nestedField.source。

内容的提问来源于stack exchange，提问作者Sue11