将对象数组的内容加载到 vuetify 组合框中

Question

这段代码让我很困惑。我正在将 typescript 与 vue (vuetify) 结合使用，我对 typescript 还是很陌生。

我有一个对象数组，我想将它们作为项目加载到 vuetify 组合框中。

Array =[
{ 
  subject: 'science', 
  difficulty: 'medium'
}
{  
  subject: 'math', 
  difficulty: 'hard'
}]

将主题作为下拉列表中可见的那个，难度将隐藏在组合框后面的值

我知道它需要看起来像这样

items: [
{ text: 'science', value: 'medium' },
{ text: 'math', value: 'hard' }];

所以我可以像这样将它加载到 v-combobox 上

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

谁能帮我实现这个目标？非常感谢！

Answer 1

我不明白你的问题，但典型的组合框应该是这样的：
（在数据中将 selectedItem 定义为空数组并调用 this.selectedItem.text）

<v-combobox
      v-model="selectedItem"
      :items="items"
      item-value="value"
      item-text="text"
      :return-object="true"
      label="Select an item.."
      outlined
      clearable
    >
    </v-combobox>

Answer 2

是的，为了加载数组的内容，您设置了项目道具以及项目值和项目文本道具，就像@Aurora 所做的那样。因为你是一个对象数组，而组件需要知道值和显示字段是什么。

将对象数组的内容加载到 vuetify 组合框中

load contents of array of objects into a vuetify combobox

arrays

combobox

object

typescript

vuetify.js