在 Vue 的 select 中使用选项的值

【问题标题】：Using Value of Option in select in Vue在 Vue 的 select 中使用选项的值
【发布时间】：2019-02-16 05:18:00
【问题描述】：

如下：

<select id="test">
<option value="1">Test One</option>
<option value="2">Test Two</option>
</select>

我想要的是，当我选择选项时，所选选项的值应该出现在输入框中。就像我单击测试一时一样，输入框应显示为选中的 1 在 Vue 中可以做到这一点吗？

【问题讨论】：

在manual中以该场景为例

标签： javascript vue.js

【解决方案1】：

您必须使用v-model 从<select> 获取所选项目

 <select v-model="selected">
      <option disabled value="">Please select one</option>
      <option>A</option>
      <option>B</option>
 </select>
 <span>Selected: {{ selected }}</span>

在 Javascript

中

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

希望你得到你想要的！

【讨论】：

就像它的，我需要选择在选择时显示“我们”。在下拉框中，而不是在单独的变量中

【解决方案2】：

您可以使用@change 事件处理程序来完成此操作

<select @change="handleChange">
  <option 
    v-for="item in options"
    :value="item.value"
    v-text="item.letter"
  />
</select>

new Vue({
  el: "#app",
  data: {
    selected: undefined,
    options: [
      { letter: 'A', value: '1' },
      { letter: 'B', value: '2' },
    ]
  },
  methods: {
    handleChange({ target: { value } }) {
      this.selected = value
    }
  },
})

看看这个fiddle

【讨论】：