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

user0DXP 0
Viewed 30

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.

vuetify.js vuejs2 vue.js javascript
1 Answers

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. i.e. 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>

Rohìt Jíndal0
Related