Vuetify v-select - 为多选设置默认值答案

【问题标题】：Vuetify v-select - set default values for multi selectVuetify v-select - 为多选设置默认值
【发布时间】：2021-05-25 22:30:18
【问题描述】：

我正在尝试设置 v-select 组件的默认值。目前它似乎只是将其设置为第一个值。在我们的应用程序中，我们允许用户选择从 API 中提取的选项。我们面临的问题是使用标准的 v-select 选项太多。因此，我创建了一种使用 v-datatable 来选择选项的方法：

然而，在选择之后，我的 v-select 只显示我检查的第一项而不是其余的：

<v-select
  v-model="selectValue"
  chips
  multiple
  :items="selectItems"
/>

这里是 selectValue 和 selectItems 方法：

setItems() {
    const items = [];

    if (!_.isEmpty(this.items[this.model])) {
        items.push({
            text: this.items[this.model][0][field],
            value: this.items[this.model][0].id
        });
    }

    this.selectItems = items;
},

setValue() {
    if (!_.isEmpty(this.items[this.model])) {
        const items = [];

        _.values(this.items[this.model]).forEach(value => {
            items.push({
                text: value.name,
                value: value.id,
            });
        });

        this.selectValue = items;
    }
},

但是这似乎只是将默认值设置为第一项：

如果我使用 vue 工具，我可以看到设置了初始值和惰性值：

但是 selectedItems 不正确。我在这里错过了什么吗？我认为设置 v-model 可以解决这个问题！谢谢

【问题讨论】：

你能在这里添加完整的组件吗？我不知道，什么时候调用这些方法。
问题的状态如何？你能弄清楚吗？然后你可以自己提供答案。

标签： vuetify.js v-model v-select

【解决方案1】：

您的<v-select> 具有selectValue 作为v-model 和selectItems 作为items。模型控制您将看到哪些项目，项目属性控制用户可以选择哪些项目。

在您的开发工具中，您向我们展示了lazyValue 和selectedItems 它们与v-select 属性的关系如何？也许您只是在v-select 的v-model 和items 上使用了错误的数据，或者这是一个错字。

【讨论】：