v-select 中的 Vuetify 3 更改事件

【问题标题】：Vuetify 3 change event in v-selectv-select 中的 Vuetify 3 更改事件
【发布时间】：2022-07-02 21:43:02
【问题描述】：

我正在测试 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>

当我关注选择并更改其值时，这就是我在控制台中得到的。

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

【问题讨论】：

它不是红色/错误，所以应该没问题。 Vuetify 3 仍处于alpha 阶段，因此可能存在问题

标签： javascript typescript vue.js vuetify.js vuejs3

【解决方案1】：

v-select 的event list 不包括change 事件。它只有一个事件：update:modelValue。

改用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

【讨论】：