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

If you are refering to vuetify you can continue reading.

Let's 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-select element, else it will use the "value" key by default.

More on v-select component

Answer 2

When you use return-object, you are bringing selectedBank into data() hence you will only need to call this.selectedBank.something inside your your @click function in the button.