Vue.js中利用嵌套JSON数组填充选择框问题求助

我之前也碰到过类似的嵌套数组遍历问题，给你整理了几种实用的解决方案，分Vue 3和Vue 2两种常用场景来说明～

首先先明确下你的JSON数据结构，假设你的数据大概是这样的（如果实际结构不同，只要对应调整遍历路径就行）：

// 示例JSON数据
const yourData = {
  // 其他无关字段...
  _team: [
    { username: "张三", id: 1 },
    { username: "李四", id: 2 },
    { username: "王五", id: 3 }
  ]
};

Vue 3 写法（Composition API） #

用<select>配合v-for直接遍历_team数组即可，记得绑定唯一的key和选项的value，还要加个判断避免数据加载时报错：

<template>
  <div>
    <!-- 先判断数组是否存在，避免初始加载时的报错 -->
    <select v-model="selectedUser" v-if="yourData._team?.length">
      <option 
        v-for="member in yourData._team" 
        :key="member.id" <!-- 用唯一ID当key，比index更可靠 -->
        :value="member.username"
      >
        {{ member.username }} <!-- 显示团队成员的用户名 -->
      </option>
    </select>
    <p v-else>团队数据加载中...</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 如果是异步获取后端数据，记得用await或者.then处理赋值
const yourData = ref({
  _team: [
    { username: "张三", id: 1 },
    { username: "李四", id: 2 },
    { username: "王五", id: 3 }
  ]
});

// 绑定选中的用户名
const selectedUser = ref('');
</script>

Vue 2 写法（Options API） #

如果用的是Vue 2，核心逻辑一致，只是写法稍有不同：

<template>
  <div>
    <select v-model="selectedUser" v-if="yourData._team && yourData._team.length">
      <option 
        v-for="(member, index) in yourData._team" 
        :key="index" <!-- Vue 2中如果没有唯一ID，也可以用index当key，优先推荐唯一标识 -->
        :value="member.username"
      >
        {{ member.username }}
      </option>
    </select>
    <p v-else>团队数据加载中...</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      yourData: {
        _team: [
          { username: "张三", id: 1 },
          { username: "李四", id: 2 },
          { username: "王五", id: 3 }
        ]
      },
      selectedUser: ''
    };
  },
  // 异步获取数据的话，在mounted钩子中请求
  mounted() {
    // 示例：axios.get('/api/team-info').then(res => {
    //   this.yourData = res.data;
    // });
  }
};
</script>

常见问题排查 #

• 如果遍历时报错Cannot read property '_team' of undefined：说明yourData初始值可能是null或undefined，记得加v-if判断，或者给yourData设置默认的空数组初始值，比如yourData: { _team: [] }
• 如果_team嵌套在更深层级（比如response.data.teamList._team），只要把遍历路径改成v-for="member in yourData.response.data.teamList._team"即可
• 要确认_team确实是数组类型，别把对象当成数组遍历了

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