在 Vue 的選擇中使用選項的值

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
    }
  },
})

看看這個小提琴