Vue中团队分类二维数组展示异常问题求助

后端返回的团队分类二维数组数据结构正常，但在Vue视图中通过外层v-for遍历分类、内层v-for遍历团队时，分类名称和团队数组被错误拆分输出，无法正确渲染团队列表。

错误代码示例 #

<template>
  <div>
    <!-- 错误写法：外层遍历后，内层直接遍历分类对象 -->
    <div v-for="item in categoryList" :key="item.categoryName">
      <div v-for="content in item">
        {{ content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoryList: [
        { categoryName: '前端团队', teams: ['前端一组', '前端二组'] },
        { categoryName: '后端团队', teams: ['后端一组', '后端二组'] }
      ]
    }
  }
}
</script>

错误输出结果 #

前端团队
["前端一组", "前端二组"]
后端团队
["后端一组", "后端二组"]

解决方法 #

1. 确认数据结构：确保后端返回的每个分类项是包含分类名称和团队数组的对象（如上述代码中的categoryList结构），而非纯数组嵌套。

2. 修正v-for遍历逻辑：外层循环遍历分类对象，内层循环明确指定遍历对象中的teams数组，而非整个分类对象：

<template>
  <div class="category-wrapper">
    <!-- 外层遍历分类对象 -->
    <div v-for="(category, idx) in categoryList" :key="idx" class="category">
      <!-- 渲染分类标题 -->
      <h2>{{ category.categoryName }}</h2>
      <!-- 内层遍历当前分类下的团队列表 -->
      <ul class="team-list">
        <li v-for="(team, teamIdx) in category.teams" :key="teamIdx">
          {{ team }}
        </li>
      </ul>
    </div>
  </div>
</template>

3. 关键问题解析：之前的错误是内层v-for直接遍历了分类对象（content in item），Vue会将对象的每个键值对作为遍历项输出，导致分类名称和团队数组被分开显示。修正后明确指定遍历category.teams，就能正确渲染每个分类下的团队列表。

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