[Vuejs]-Using Value of Option in select in Vue

by

2👍

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!

1👍

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

Leave a comment