Using Value of Option in select in Vue

Question

In the following:

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

I want is, When i select the option, The value of selected option should appear in input box. Like when i click Test One, the input box should say 1 as selected Is it possible to do this in Vue?

Answer 1

You have to used v-model to get the selected item from <select>

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

In Javascript

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

I hope you got what you want!

Answer 2

You can accomplish this by using the @change event handler

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

Check out this fiddle