Vue.js中如何在b-form-select内获取多层v-for遍历的对应值

错误原因 #

你当前的写法错误原因是Users本身是数组类型，不存在直接的details属性，必须先遍历Users数组内的每一个user对象，再访问单个user下的details属性才能拿到数据，和你之前渲染span标签的双层循环逻辑一致。

方案1：模板内双层循环写法 #

用template标签承载第一层循环，不会生成多余的DOM节点，符合原逻辑：

<b-form-select v-model="user_name">
  <template v-for="(user, userIndex) in Users" :key="userIndex">
    <option
      :value="userName.id"
      v-for="(userName, nameIndex) in user.details"
      :key="`${userIndex}-${nameIndex}`"
    >
      {{ userName.name }}
    </option>
  </template>
</b-form-select>

方案2：计算属性拍平数组（更推荐） #

提前在计算属性中将嵌套数组处理为一维数组，模板代码更简洁易维护：

JS 逻辑 #

computed: {
  userOptions() {
    // flatMap会自动把内层数组合并为一维数组
    return this.Users.flatMap(user => user.details)
  }
}

模板代码 #

<b-form-select v-model="user_name">
  <option
    :value="userName.id"
    v-for="userName in userOptions"
    :key="userName.id"
  >
    {{ userName.name }}
  </option>
</b-form-select>

额外提示：如果使用BootstrapVue框架，可直接将处理好的数组传给b-form-select的:options属性，无需手动编写option标签，只需提前把userOptions的字段调整为value对应id、text对应name即可。

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