V-Select 设置不来自 Items 标签的默认值

Question

我有一个 V-select，我想用不是来自 Items 标签的东西设置默认值。

我在某处读到选定的值需要来自 Items 标记，因此我尝试在每次打开对话框时将我想要的默认选定值推送到 Items 标记的变量中。

这个 v-select 位于一个名为 Tablecomponent.vue 的 Vue 组件中，该组件包含一个 V-data-table 和一个 V-dialog 来显示和编辑数据。 我正在使用来自父组件的 Prop 传递一个名为grouplist2的变量来创建 V-select

V-Select 位于一个对话框中，用于编辑表格中的一行。

这是我的 v-select 的代码：

  <v-select
    v-else-if="header.value === 'paramTblMeter'"
    v-model="editedItem[header.value]"
    item-text="paramMeterName"
    item-value="paramId"
    :items="grouplist2"
    :label="header.text + ' name'"
    return-object
    single-line
  ></v-select>

在这里，我尝试将默认值推送到 Items Tag 的grouplist2中：

editItem(item) {
    this.grouplist2.push(item.paramTblMeter); // here I push the default selected into the list
    this.editedIndex = this.data.indexOf(item);
    this.editedItem = Object.assign({}, item);
    this.dialog = true;
  }

但不知何故，在推送我想要的默认值后，v-select 不会 select 成为默认值，它会导致对话框上的其他文本字段和 V-Select 不显示来自 V-model 的默认选择，但值 I推入它确实出现在 V-select 上的列表。

Answer 1

v-model基本上是指元素的 value 属性。 item-value="paramId"告诉<select>字段在从列表中选择一个选项时，应将v-model值设置为所选选项的值。

根据您的设置进行观察：

• 如果您想要一个默认选择， v-model值应该等同于项目列表中的任何option值。 即，您应该将editedItem[header.value]的值等同于下拉选项中任何paramId的值。

工作演示：

 new Vue({ el: '#app', data () { return { header: { text: 'Header', value: 2 }, grouplist2: [{ paramMeterName: 'Alpha', paramId: 1 }, { paramMeterName: 'Beta', paramId: 2 }, { paramMeterName: 'Gamma', paramId: 3 }, { paramMeterName: 'Xyz', paramId: 4 }] } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.1/dist/vuetify.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.1/dist/vuetify.min.css"/> <div id="app"> <v-app id="inspire"> <v-select v-model="header.value":items="grouplist2":label="header.text + ' name'" item-text="paramMeterName" item-value="paramId" > </v-select> </v-app> </div>