CODEWITHSUNDEEP
vue.jsv-select
JMKelley
JMKelley

Reputation: 658

Get data from v-select field

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)
    }
}

Upvotes: 2

Views: 5829

Answers (3)

sameraze agvvl
sameraze agvvl

Reputation: 485

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)
}

}

Upvotes: 1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 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>

Upvotes: 1

hvaughan3
hvaughan3

Reputation: 11105

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>

Upvotes: 0

Related Questions