Setting v-select value programmatically does not fire @change in vuetify

Question

I am trying to set v-select value programmatically, however the associated @change event does not fire. If I manually select the option, the event fires as expected.

Template:

<div id="app">
<v-app dark>
  <v-select 
    v-model="currentItem" 
    :items="items"
    @change="itemChanged"
  />
</v-app>
</div>

JS:

Vue.use(Vuetify);

var vm = new Vue({
    el: "#app",
  methods: {
    itemChanged(item) {
        console.log('item changed',item);
    }
  },
  data: {
    currentItem: '',
    items: [
        { text: "Name", value: 'name' },
      { text: "Number", value: 'number' },
      { text: "Inputs", value: 'inputs' }
    ]
  },
  mounted() {
    setTimeout(() => {
        this.currentItem = 'inputs';
    }, 2000);
  }
});

The jsfiddle is here

Does anybody have any solutions aside from manually calling the function when setting the value programmatically?

Answer 1

The change event is defined in such a way so it is emitted when the input is changed by user interaction (see the event documentation). If you want to monitor all the changes, you can either use the input event:

<v-select 
  v-model="currentItem" 
  :items="items"
  @input="itemChanged"/>

https://jsfiddle.net/0qbomzta/

---

or add a watcher to watch the currentItem:

<div id="app">
<v-app dark>
  <v-select 
    v-model="currentItem" 
    :items="items"/>
</v-app>
</div>

In Vue instance, add:

watch: {
  currentItem (newVal) {
    console.log('item changed', newVal);
  }
},

https://jsfiddle.net/w5voub3h/