如何从 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 的选定值？ . .

原文由 kylas 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 组件的更多信息

原文由 Allkin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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按钮。

原文由 gerald heng 发布，翻译遵循 CC BY-SA 4.0 许可协议