V-选择设置不是来自 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>

这里我尝试将默认值推入项目标签的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 不选择默认值，并导致对话框上的其他文本字段和 V-Select 不显示 V-model 中的默认选择，而是显示值我推入列表，它确实出现在 V-select 上。

Answer 1

v-model

基本上指的是元素的值属性。

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/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>