Vuetify 3 change event in v-select

February 11, 2022

I am testing Vuetify 3 (npm:@vuetify/nightly@next) v-select and try to get change event. However, my handler function is not called. This is my code:

TS:

export default defineComponent({

  setup() {

    function onLanguageChange(a: any) {
      console.log(a);
    }
    const items = ['Русский', 'English'];

    return {onLanguageChange, items}
  }
});

Vue

 <v-select
    prepend-icon="mdi-web"
    :items="items"
    label="Lang"
    @change="onLanguageChange"
  ></v-select>

And this is what I get in console when I focus select and change its value.

Could anyone say, if this is a bug or something is wrong with my code (and how to fix it)?

>Solution :

v-select‘s event list does include the change event.

Use the update:modelValue event instead:

<v-select @update:modelValue="onLanguageChange">

demo 1

Or use a v-model with a watcher:

<v-select v-model="lang">...</v-select>

import { ref, watch } from 'vue'

export default {
  setup() {
    const lang = ref()
    watch(lang, (newValue) => console.log('new lang', newValue))
    return { lang }
  }
}

demo 2