CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
kylas
kylas

Reputation: 1455

How to get selected value from dropdown in vuejs?

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

Upvotes: 6

Views: 23234

Answers (3)

Rukkiecodes
Rukkiecodes

Reputation: 43

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>

Upvotes: 1

Gerald H
Gerald H

Reputation: 618

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.

Upvotes: 3

Allkin
Allkin

Reputation: 1098

If you are refering to 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

Upvotes: 8

Related Questions