Question

2

How to get selected value from dropdown in vuejs?

rated 0 times [ 8] [ 6] / answers: 1 / hits: 20173 / 6 Years ago, wed, august 22, 2018, 12:00:00

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 ?
. .

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

felixa

Add To Favorites

Follow

Total Points: 180

Total Questions: 113

Total Answers: 108

Location: Palau

Member since Sat, Aug 21, 2021

3 Years ago

answered 6 Years ago raymondd · Accepted Answer

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.