How to call a function on selection change in v-select?

Question

I am currently working on Vuetify, trying to call a method in Vue.js from v-select using HTML. But the @change event is not properly selecting the conditions.

<v-layout row wrap>
    <v-flex xs12 sm4>
      <!-- DropDown Combo -->
      <v-select v-model="selected"
        :items='dropdown_tables'
        append-icon='fa-angle-down'
        label='Select'
        persistent-hint
        return-object
        single-line
        @change='RefreshGrid'
        target='#dropdown'>
        </v-select>
        <!-- <p> {{`${selected}`}} </p> // this code gives the selected combo text -->
    </v-flex>
   </v-layout>
</v-container>

My Javascript function

 methods: {
   RefreshGrid: function () {
   let cName;
   if (this.selected === 'Business Area') {
    cName = 'businessArea';
   } else if (this.selected === 'Council') {
     cName = 'council';
   }
   let obj = {
    vm: this,
    collectionName: cName,
    action: 'masterData/setMasterData',
    mutation: 'setMasterData'
   };
   this.$store.dispatch(obj.action, obj);
 }

So when I use on change, and click on council it shows businessArea data in grid and vice versa. Trying to figure out how the indexing of v-select works.

score 15 · Accepted Answer · edited Jul 03 '18 at 15:34

15

So, using @input instead of @change works fine.

edited Jul 03 '18 at 15:34

Emile Bergeron

17,074
5
83
129

answered Jul 03 '18 at 15:28

Nikul Vyas

363
3
7
30

1

howt pass selected value ? – MH Fuad Aug 18 '20 at 11:56
@MHFuad use `v-model="value"`, then simply get the value from data – a.fahmiin Aug 02 '21 at 16:16

How to call a function on selection change in v-select?

1 Answers1