PrimeVue Dropdown绑定对象数据报错，求无循环转换方案

可以利用JavaScript原生方法组合，一步完成对象到Dropdown所需数组格式的转换，无需单独编写循环语句：

方法1：使用计算属性（推荐） #

在Vue组件的计算属性中处理数据，代码更清晰且可复用：

computed: {
  dropdownOptions() {
    return Object.entries(this.respTags.data).map(([key, item]) => ({
      value: key,
      label: item.version
    }))
  }
}

模板中直接绑定处理后的数组：

<Dropdown :options="dropdownOptions" />

方法2：直接在模板内转换 #

如果仅单次使用，也可以直接在模板中完成转换：

<Dropdown 
  :options="Object.entries(respTags.data).map(([key, item]) => ({value: key, label: item.version}))" 
/>

原理说明 #

• Object.entries(obj)会将对象转换为键值对数组，你的数据会被转为[['tag1', {version: "1.2.3"}], ['tag2', {version: "1.2.4"}]]
• 再通过map()遍历该数组，将每个键值对映射为Dropdown要求的{value, label}结构对象，最终得到符合格式的数组

以上方式可直接解决「Invalid prop: type check failed for prop "options"」的警告，同时省去单独循环的冗余代码。

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