Question

以下：

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

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

Answer 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: ''
  }
})

希望您得到了想要的东西！

Answer 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

在Vue中的select中使用Option的值

2 个答案: