如何从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)
}

如何v-select在单击按钮时获得选定的值？. .

Answer 1

如果您指的是vuetify，则可以继续阅读。

让我们以这个例子（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)        
    }
  }
})

如果您在 items 对象中使用其他键作为值，则需要在v-select元素中指定item-value属性，否则默认情况下它将使用“ value ”键。

更多关于 v-select 组件