Vuetify 3 在 v-select 中更改事件

Question

我正在测试 Vuetify 3 (npm:@vuetify/nightly@next) v-select 并尝试获取更改事件。但是，我的处理函数没有被调用。这是我的代码：

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>

这就是我在聚焦 select 并更改其值时在控制台中得到的结果。

有人能说这是一个错误还是我的代码有问题（以及如何修复）？

Answer 1

v-select 的 event list 确实包含 change 事件。

改为使用 update:modelValue 事件：

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

demo 1

或者使用 v-model 和观察者：

<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

Vuetify 3 在 v-select 中更改事件

Vuetify 3 change event in v-select

javascript

typescript

vue.js

vuetify.js

vuejs3