从v-select字段获取数据

Question

我被困在从我的v-选择输入中获取数据。在console.log中，每当我键入时，它只是重复一个空字符串，没有发送任何数据。

输入

  <v-select name="user" v-model="selectedUser"  @select="testingMethod" @input="changeUser" label="user" :options="videos">
  </v-select>

数据

  data() {
    return {
      selectedUser:'',
    }

方法

 methods: {

    changeUser: function() {
      console.log(this.selectedUser)
    }
}

Answer 1

当您选择一个项时触发@input事件，而不是在键入时，您可以使用@search事件：

  <v-select name="user" v-model="selectedUser"  @select="testingMethod" @search="changeUser" label="user" :options="videos">
  </v-select>

Answer 2

尝试使用@change而不是@input。我只是猜测一下，因为我不熟悉Vuetify控件，我假设v-select来自这里。

另外，使用:items而不是:options。

https://vuetifyjs.com/en/components/selects/#usage

<v-select name="user" v-model="selectedUser"  @select="testingMethod" @change="changeUser" label="user" :items="videos">
  </v-select>

Answer 3

根据我的经验，在输入事件时使用@search或@change来读取数据，在用户单击/选择或完成输入(当按enter键时)之后，使用@input从v模型中获取数据。

 <v-select name="user" v-model="selectedUser"  @search="changeUser" :options="videos">

然后数据

data() {
   return {
    selectedUser:'',
 }

at法

methods: {

changeUser(input) {
  console.log('typed data is ',input)
}

}