Vue使用v-for渲染select选项时如何获取title_new等子级键值？

问题原因 #

你当前的v-for仅遍历了最外层的value对象，循环项对应post、product层级的父对象，绑定的:value="index"就是父级键名，因此只能拿到父级值，无法获取子级的title_new、title_hot这类键。

解决方案 #

根据你的业务场景可以选以下两种实现方式：

方式1：模板双层循环（无需额外处理数据源，适合直接展示所有子级选项的场景）

直接在模板内嵌套两层v-for，遍历到子层级后绑定子级键为选项值：

<a-form-item label="Post" :colon="false">
  <a-select
    @change="changeValue"
    placeholder="Select a value"
  >
    <!-- 第一层遍历父级对象 -->
    <template v-for="(parentVal, parentKey) in value">
      <!-- 第二层遍历父级下的子对象，childKey就是你需要的子级键 -->
      <a-select-option
        v-for="(childItem, childKey) in parentVal"
        :value="childKey"
        :key="`${parentKey}-${childKey}`"
      >
        {{ childItem.name }}
      </a-select-option>
    </template>
  </a-select>
</a-form-item>

如果需要同时获取父级+子级键，可将:value修改为:value="{parentKey, childKey}"，changeValue方法内可直接取到两个层级的键值。

方式2：计算属性拍平数据源（适合选项需要额外处理、模板逻辑更简洁的场景）

先通过计算属性将嵌套的数据源拍平为一维选项数组：

computed: {
  flatOptions() {
    const options = []
    Object.keys(this.value).forEach(parentKey => {
      Object.keys(this.value[parentKey]).forEach(childKey => {
        options.push({
          label: this.value[parentKey][childKey].name,
          value: childKey,
          // 可按需添加父级字段备用
          parentKey: parentKey
        })
      })
    })
    return options
  }
}

模板直接遍历拍平后的数组即可：

<a-select-option
  v-for="item in flatOptions"
  :value="item.value"
  :key="item.value"
>
  {{ item.label }}
</a-select-option>

场景补充：父子级联动下拉

如果你的业务是先选父级（post/product）再选对应子级，只需要新增一个父级选择器，绑定选中的父级键后，子级选择器的遍历源替换为value[选中的父级键]即可。

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