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

单击按钮后如何获得v-select的选定值？
。 。

最佳答案

如果您引用的是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)
    }
  }
})

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

More on v-select component