javascript - Vuetify 3 endringshendelse i v-select

Jeg tester Vuetify 3 (npm:@vuetify/nightly@next) v-select og prøver å få change-hendelsen. Imidlertid blir ikke min handler-funksjon kalt. Dette er koden min:

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>

Og dette er hva jeg får i konsollen når jeg fokuserer på select og endrer verdien dens.

Kunne noen si om dette er en feil eller om det er noe galt med koden min (og hvordan fikse det)?

Svar #1

Listen over hendelser for v-select inkluderer ikke change-hendelsen. Den har bare én hendelse: update:modelValue.

Bruk update:modelValue-hendelsen i stedet:

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

demo 1

Eller bruk en v-model med en 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

Relaterte artikler