Vue遍历对象数组生成radioButton显示值而非key的问题求助

解决方案 #

你当前的数据结构是数组每个元素为仅含单个键值对的对象，需要分别取出每个对象的键、值绑定到对应属性即可，有两种实现方式：

方式1：直接在模板中处理（适合简单场景）

直接通过Object.keys、Object.values取单个对象的键和值绑定，同时修正错误的:key绑定：

<div
  v-for="item in data"
  :key="Object.keys(item)[0]"
>
  <radio-button
    v-model="date"
    :value="Object.keys(item)[0]"
    :label="Object.values(item)[0]"
  />
</div>

修改后v-model绑定的date值就是需要提交给API的key，label显示为对应的文本值，符合需求。

方式2：通过计算属性预处理数据（可读性、可维护性更高）

先在js部分通过计算属性把原数据转为标准的key-value结构：

computed: {
  formattedOptions() {
    return this.data.map(rawItem => {
      const optionKey = Object.keys(rawItem)[0]
      return {
        key: optionKey,
        label: rawItem[optionKey]
      }
    })
  }
}

模板直接遍历预处理后的数据即可：

<div
  v-for="option in formattedOptions"
  :key="option.key"
>
  <radio-button
    v-model="date"
    :value="option.key"
    :label="option.label"
  />
</div>

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