V-Select set default value that is not from the Items tag

Question

I have a V-select and I want to set the default value with something that's not from the Items tag.

I read somewhere that the Selected Value needs to be from the Items tag so I try to push the default selected value that I want into the variable of the Items tag every time I Open the dialog box.

This v-select is in a Vue component named Tablecomponent.vue that contains a V-data-table and a V-dialog to display and edit data. I am passing a variable named grouplist2 using Prop from the parent component to create the V-select

The V-Select is on a dialog box to edit a row from a table.

This is the code for my 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>

Here I tried to push the default value into the grouplist2 for the Items Tag:

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;
  }

But somehow after pushing the default value that I want the v-select doesn't select the default value and it cause other Text Field And V-Select on the dialog box to not show the default selection from the V-model but the value I push in the list it does appear on the V-select.

Answer 1

v-model is basically referring the value attribute of a element. item-value="paramId" tells the <select> field that on selection of an option from the list, v-model value should be set as the value of selected option.

Observation as per the setup you have:

• If you want a default selection, v-model value should be equivalent to any of the option value from the items list. ie you should have value of editedItem[header.value] equivalent to any of the value of paramId in the dropdown options.

Working Demo :

 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>