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

【问题标题】：load contents of array of objects into a vuetify combobox将对象数组的内容加载到 vuetify 组合框中
【发布时间】：2021-12-07 14:45:18
【问题描述】：

我有这段代码真的让我很困惑。我正在将 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" />

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

【问题讨论】：

标签： arrays typescript object combobox vuetify.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

我不明白您的问题，但典型的组合框应如下所示：
（将 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>

【讨论】：

嗨，基本上我想将数组的内容加载为组合框的项目。所以我只是将数组直接提供给 :items 道具？
是的，没错。你需要一个模型和物品。还 :return-object="true" 定义，选择后你可以像 this.selectedItem.Value 一样调用整个对象