vuetify.js - Vuetify v-select - 为多选设置默认值

Question

我正在尝试设置 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.jsv-modelv-select

Answer 1

你<v-select>有selectValueasv-model和selectItemsas items。模型控制您将看到哪些项目，而项目属性控制用户可以选择哪些项目。

在您的开发工具中，您向我们展示了它们与lazyValue属性的关系？也许您只是在您的and of上使用了错误的数据，或者这是一个错字。selectedItemsv-selectv-modelitemsv-select