Sometimes, we want to fix Vuetify v-select change event returns previously selected value instead of current with Vue.js.

In this article, we’ll look at how to fix Vuetify v-select change event returns previously selected value instead of current with Vue.js.

How to fix Vuetify v-select change event returns previously selected value instead of current with Vue.js?

To fix Vuetify v-select change event returns previously selected value instead of current with Vue.js, we set the @change directive to the reference of the change event handler.

For instance, we write

<template>
  <div>
    <v-select
      :items="items"
      v-model="select"
      label="Select"
      single-line
      item-text="report"
      item-value="src"
      return-object
      persistent-hint
      @change="changeRoute"
    ></v-select>
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    changeRoute(a) {
      console.log(a);
    },
  },
  //...
};
</script>

to add a v-select drop down.

We set @change to the changeRoute method.

To get the latest value of the drop down, we get it from the a parameter in changeRoute.

Conclusion

To fix Vuetify v-select change event returns previously selected value instead of current with Vue.js, we set the @change directive to the reference of the change event handler.