在不使用 v-model 的情况下，如何设置 v-combobox 的默认值？

Question

我正在创建一个带有 v-combobox 组件的表单。

:items 正在从我的数据库中的表中检索，我正在使用 v-model 将选择的任何内容输入到数据库中的不同表中，因此我使用 v-model 链接到新的数据库表.

我知道我可以使用 v-model 来设置默认值（意味着自动选择该项目），但是有没有其他方法可以做到这一点，因为我目前正在使用 v-model 连接到数据库?

表格：

<v-combobox
    outlined
    :items="allTypes"
    v-model="plates[plates.findIndex(obj => obj.id === 1)].value"
    :search-input="search"
>
</v-combobox>

Answer 1

如果我按照您在此处尝试完成的操作... 您想在组合框上设置一个默认值，而不是它与 v-model 绑定的数据的真实值？

我不确定这是个好主意。因为如果用户想要默认值，他们会留下它，认为“它已经设置为我想要的”，但它实际上并不能准确反映他们将设置的值？

无论哪种方式，听起来您可能希望将逻辑从当前的 v-model 属性移动到计算属性，这样您就可以分离获取和设置的逻辑。

已更新代码片段

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      // the set value, initially false to use as a 'has a value been set' flag
      setValue: false,
      // the default value shown before selection has happened
      defaultValue: "Pick a value (default)",
      // the options to select from
      allTypes: [
        'dogs',
        'cats',
        'hamsters',
        'something else',
      ],
      // your table data
      table: {
        value: "null (initially)"
      }
    }
  },
  computed: {
    // the value the we are binding the combo box to
    comboBoxValue: {
      // the value to output
      get() {
        // if a value has not been set
        if (!this.setValue) {
          // return the default 
          return this.defaultValue;
        } else {
          // else return whatever you would like
          return this.setValue;
          /* plates[plates.findIndex(obj => obj.id === 1)].value */
        }
      },
      // the function that happens when the combo box is set
      set(val) {
        // val is the value the combox HAS been set to, not something you define here
        console.log(val);
        // update your table, pass in "val" the combo box value
        this.updateTable(val);
        // update the set value, combo box no longer show the default value
        this.setValue = val;

      }
    }
  },
  methods: {
    // some method to update your table
    updateTable(newValue) {
      alert('update table with value: ' + newValue)
      this.table.value = newValue;
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<div id="app">
  <v-app>
    <v-content>
      <v-container fluid>
        <v-row>
          <v-col cols="12">
            table value: {{table.value}}
          </v-col>
          <v-col cols="12">
            <v-combobox outlined :items="allTypes" v-model="comboBoxValue">
            </v-combobox>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>