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

Change this.selectedBank.bankName to x.selectedBank where x is your Vue object declaration. — kgbph
– kgbph, Commented Aug 22, 2018 at 8:53

Allkin · Accepted Answer · 2020-05-19 06:29:50Z

8

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.

1 Comment

SimaWB Over a year ago

Be careful; v-select must have return-object prop as above!

Gerald H · Accepted Answer · 2020-08-06 06:45:13Z

3

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.

answered Aug 6, 2020 at 6:45

Gerald H

6187 silver badges18 bronze badges

1 Comment

Johan Hoeksma Over a year ago

This is great <v-select v-model="selected" item-text="name" :items="tokens" item-value="" return-object></v-select>

Rukkiecodes · Accepted Answer · 2021-07-06 22:12:22Z

1

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>

answered Jul 6, 2021 at 22:12

Rukkiecodes

431 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to get selected value from dropdown in vuejs?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related