How to get selected value from dropdown in vuejs?

Question

HTML

<v-select
  v-model="selectedBank"
  :items="items"
  item-text="bankName"
  label="Select a bank"
  persistent-hint
  return-object
  single-line
>
</v-select>

<v-btn 
  round 
  block 
  color="blue darken-3" 
  dark 
  large 
  @click="directToBank(items.bankName)"
>
  CONTINUE
</v-btn>

JS

async directToBank(bankID) {
  console.log("Came into directtobank", this.selectedBank.bankName)
}

How can I get the selected value of v-select upon clicking on the button ? . .

Answer 1

当您使用return-object ，您将selectedBank带入 data() 因此您只需要在按钮的@click function中调用this.selectedBank.something 。

Answer 2

If you are refering to vuetify you can continue reading.

Let take this example ( codepen ):

new Vue({
  el: '#app',
  data: () => ({
    items: [
      {value: '1', bankName: 'Bank1'},
      {value: '2', bankName: 'Bank2'},
    ],
    selectedBank: null
  }),
  methods: {
    directToBank() {
      console.log("Label: ", this.selectedBank.bankName)
      console.log("Value: ", this.selectedBank.value)        
    }
  }
})

If you use other key for value in your items object you need to specify the item-value attribute in your v-selec t element, else it will use the " value " key by default.

More on v-select component

Answer 3

Getting values from vuetify select is similar to getting the values for an even fired in javascript.

passing the even as a prop and the prop is the value you want

 new Vue({ el: '#app', vuetify: new Vuetify(), data: { items: ['Foo', 'Bar', 'Fizz', 'Buzz'], }, methods: { select_value(e) { console.log(e) } } })

 <v-select :items="items" label="Solo field" @change="select_value" solo></v-select>