Without using v-model, how to set default value of v-combobox?

Question

I'm creating a form with a v-combobox component.

The :items are being retrieved from a table in my DB and I am using v-model to enter whatever is selected into a different table in the DB, so I'm using v-model to link to the new DB table.

I know that I can use v-model to set a default value (meaning that that item is automatically selected), however is there an alternative way to do this since I'm currently using v-model for connecting to the DB?

Form:

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

Answer 1

If I'm following what you are trying to accomplish here... You want to have a default value set on your combo box that is not the true value of the data it is binded to with v-model?

I'm not sure that is a great idea. Because if the user wants the default value they will leave it, thinking "it's already set to what I want" but it's not actually an accurate reflection of the value they would be setting?

Either way, it sounds like you probably want to move the logic from your current v-model prop to a computed property, so you can separate the logic of getting and setting.

UPDATED With Code Snippet

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>