Vue中Array.map处理v-for表格数据源无报错却渲染失效

你的代码存在4个核心问题，是导致表格无法渲染的直接原因：

• data选项语法错误：Vue的data函数必须通过return返回响应式数据对象，你当前写法直接在data()后写对象、没有返回值，响应式数据根本不会被正确初始化。
• 对象访问方式错误：networkTeams是定义在data里的普通对象，不是方法，你在fixedNetworkTeams里写this.networkTeams(teamId)是把它当函数执行，会触发类型错误，正确写法应该和原可运行版本一致，用方括号取值：this.networkTeams[teamId]。
• 模板调用方法未传参：你定义的fixedNetworkTeams需要接收teamId入参，但模板里v-for直接遍历fixedNetworkTeams，拿到的是方法本身，不是方法执行后返回的映射数组，自然无法渲染列表。
• 缺少边界判断：如果对应teamId的条目还没加载完成、不存在于networkTeams对象中，直接访问.data属性会触发报错，导致渲染中断。

JS部分修正 #

data(){
  // 必须通过return返回响应式数据
  return {
    networkTeams: {},
    sources: {
         1: 'green',
         2: 'blue',
         3: 'pink',
         4: 'yellow',
         5: 'orange',
         6: 'blue'
    }
  }
},
methods: {
  fixedNetworkTeams(teamId) {
    // 加边界判断，对应team数据不存在时返回空数组，避免渲染报错
    if (!this.networkTeams[teamId] || !Array.isArray(this.networkTeams[teamId].data)) {
      return []
    }
    // 修正对象取值方式，不要把普通对象当函数调用
    return this.networkTeams[teamId].data.map(u => {
      return { ...u, source: this.sources[u.source] };
    });
  }
}

模板部分修正 #

<!-- 调用方法时传入当前team的id作为参数，和原可运行版本的逻辑保持一致 -->
<tr v-for="networkTeam in fixedNetworkTeams(team.id)"
    :key="team.id + networkTeam.id"
    :class="{ odd2: networkTeam.id % 2 !== 0 }"
>                    
  <td>
       <span> {{ networkTeam.source }} </span>
  </td>
  <td class="text-center data-column">
      <span> {{ networkTeam.accountId }} </span>
  </td>
  <td class="text-nowrap text-left breakAll">
      <span> {{ networkTeam.name }}</span>
  </td>
</tr>

补充说明：控制台没有抛出错误大概率是本地开发配置吞掉了Vue的运行时错误，修正以上问题后表格即可正常渲染，第一列的source字段会自动替换为sources对象中对应的颜色字符串。

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