如何从 vuejs 的下拉列表中获取选定的值？答案

【问题标题】：How to get selected value from dropdown in vuejs?如何从 vuejs 的下拉列表中获取选定的值？
【发布时间】：2019-01-28 11:37:48
【问题描述】：

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>

async directToBank(bankID) {
  console.log("Came into directtobank", this.selectedBank.bankName)
}

点击按钮后如何获取v-select 的选定值？ . .

【问题讨论】：

获取selectedBank的值
无法读取 null @kgbph 的属性“selectedBank”
将this.selectedBank.bankName 更改为x.selectedBank，其中x 是您的Vue 对象声明。

标签： javascript vue.js vuetify.js

【解决方案1】：

从 vuetify select 中获取值类似于在 javascript 中获取偶数触发的值。

将 even 作为道具传递，道具就是你想要的值

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
  },
  methods: {
    select_value(e) {
      console.log(e)
    }
  }
})

&lt;v-select :items="items" label="Solo field" @change="select_value" solo&gt;&lt;/v-select&gt;

【讨论】：

【解决方案2】：

当您使用return-object 时，您会将selectedBank 带入data()，因此您只需在按钮中的@click function 中调用this.selectedBank.something。

【讨论】：

这很棒

【解决方案3】：

如果您指的是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”键。