1

I'm getting stuck on getting the data from my v-select input. Within console.log whenever I type it's just repeating an empty string with no data being sent.

Input

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

Data

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

Method

 methods: {

    changeUser: function() {
      console.log(this.selectedUser)
    }
}
JMKelley
  • 599
  • 2
  • 17
  • 36
  • can you alter this sandbox in order to reproduce the problem? https://codesandbox.io/s/j243vnpyp3 – Apostolos Jun 23 '22 at 12:24
  • @JMKelley Where is v-select control coming from? Which library are you using for that control or is it custom? – hvaughan3 Jun 23 '22 at 12:31

3 Answers3

1

@input event is triggered when you select an item not when you type, you could use @search event :

  <v-select name="user" v-model="selectedUser"  @select="testingMethod" @search="changeUser" label="user" :options="videos">
  </v-select>
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
1

from my experience use @search or @change in order to read data at the typing event and @input for getting data from v-model after user clicked/selected or finished typing (when pressing enter key)

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

then Data

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

at method

methods: {

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

}

sameraze agvvl
  • 397
  • 4
  • 11
0

Try using @change instead of @input. Just a guess as I am not familiar with Vuetify controls which I am assuming v-select comes from.

Also, use :items instead of :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>
hvaughan3
  • 10,955
  • 5
  • 56
  • 76