Answer a question

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)?

Answers

v-select's event list does not include the change event. It only has one event: update:modelValue.

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