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-selec t元素中指定 item-value 属性，否则它将使用默认情况下为“ 值”键。

More on v-select component

Answer 2

使用globals()时，会将# my_var_3 is not defined at this point: print(my_var_3) --------------------------------------------------------------------------- NameError ... NameError: name 'my_var_3' is not defined # Now use 'globals' var_name = "my_var" + "_3" globals()[var_name] = "Sample value" print(my_var_3) ==> Sample value带入data（），因此您只需要在按钮中的return-object内调用selectedBank。

Answer 3

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

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

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>

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

3 个答案: