如何在多个启用的 v-select 组件中预先选择选项？答案

【问题标题】：How can I pre-select options in a multiple enabled v-select component?如何在多个启用的 v-select 组件中预先选择选项？
【发布时间】：2020-05-15 18:49:06
【问题描述】：

我有一个 v-select 组件，允许用户从组合“multiples”选项中进行选择。

            <v-select
              dense
              :items="merchants"
              item-text="name"
              item-value="id"
              name="merchants"
              v-model="editedItem.merchants"
              return-object
            >
            </v-select>

items 是一个对象列表，并且 v-select 已正确填充。 v-model 是一个 api 返回的对象数组。

如图所示：

但是当 v-select 打开时，没有任何项目是“已经”选择的。

v-model 中的数据类型应该如何，让 v-select 将列表中的项目与所选项目“匹配”。

谢谢

最好的问候

【问题讨论】：

你能提供一个在线演示/小提琴来说明你的场景吗？
嗨@MajedBadawi 给我几个小时！

标签： vuetify.js v-select

【解决方案1】：

只需在 v-model 中指定您的 API merchants 数据，所有这些对象都会被选中。并且不要忘记添加 item-text 和 item-value 道具。

演示

https://codepen.io/aQW5z9fe/pen/JjYmoVb

<v-select
  v-model="selected"
  :items="items"
  item-text="name"
  item-value="id"
  label="Select"
  multiple
></v-select>

data () {
  return {
    items: [
      {
        id: 0,
        name: 'merchant-1'
      },
      {
        id: 1,
        name: 'merchant-2'
      }
    ]
  } 
},
computed: {
  APIdata () {
    const merchants = [
      {
        id: 0,
        name: 'merchant-1'
      }
    ]
    return merchants
  }
}

【讨论】：