如何将自定义结构对象数组处理为Vuetify v-combobox可加载的items格式

方案1：手动转换数组（适合需复用转换后数据的场景） #

你可以通过数组map方法遍历原数组，按要求重构字段结构，在Vue中推荐封装为计算属性保证响应式，TypeScript写法示例如下：

import { ref, computed } from 'vue'

// 定义原数组数据类型
interface OriginalItem {
  subject: string
  difficulty: string
}

// 你的原始数据
const originalList = ref<OriginalItem[]>([
  { 
    subject: 'science', 
    difficulty: 'medium'
  },
  {  
    subject: 'math', 
    difficulty: 'hard'
  }
])

// 转换为符合Vuetify要求的items
const items = computed(() => {
  return originalList.value.map(item => ({
    text: item.subject,
    value: item.difficulty
  }))
})

模板中直接绑定即可：

<v-combobox :items="items" />

方案2：使用Vuetify内置属性（无需转换数组，更简便） #

Vuetify的v-combobox组件原生支持自定义展示字段和值字段，不用手动转换数组，直接绑定原数组后指定对应属性即可：

<v-combobox 
  :items="originalList"
  item-text="subject"
  item-value="difficulty"
/>

item-text指定下拉列表展示的字段名，item-value指定选中后绑定的字段名，效果和手动转换数组完全一致。

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