Vuetify 3 v-select 中的更改事件

Question

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

\n

TS：

\n

export default defineComponent({\n\n  setup() {\n\n    function onLanguageChange(a: any) {\n      console.log(a);\n    }\n    const items = [\'\xd0\xa0\xd1\x83\xd1\x81\xd1\x81\xd0\xba\xd0\xb8\xd0\xb9\', \'English\'];\n\n    return {onLanguageChange, items}\n  }\n});\n

\n

维埃

\n

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

\n

这就是当我集中选择并更改其值时我在控制台中得到的结果。

\n

\n

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

\n

Answer 1

v-select的事件列表不包含该change事件。它只有一个事件：update:modelValue。

使用update:modelValue事件代替：

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

演示1

或者将 av-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 }
  }
}

演示2