Menu Close

How to get selected option on @change with Vue.js?

How to get selected option on change with Vue.js

To get selected option on @change with Vue.js, we should use v-model to bind the selected value to a reactive property.

For instance, we write

<select
  name="LeaveType"
  @change="onChange($event)"
  class="form-control"
  v-model="key"
>
  <option value="1">Annual Leave/ Off-Day</option>
  <option value="2">On Demand Leave</option>
</select>
<script>
  const vm = new Vue({
      data: {
          key: ""
      },
      methods: {
          onChange(event) {
              console.log(event.target.value)
          }
      }
  }
</script> 

to add a select drop down.

We bind the key reactive property to the value of the selected value of the drop down with v-model.

Also we can get the value from event.target.value from the change event handler.

Posted in Vue.js

You can also read...