Sometimes, we want to get selected option on @change with Vue.js.

In this article, we’ll look at 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 can set @change to a method that calls $event.

For instance, we write

<template>
  <select name="leaveType" @change="onChange($event)" v-model="key">
    <option value="1">Off-Day</option>
    <option value="2">On Demand Leave</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      key: "",
    };
  },
  methods: {
    onChange(event) {
      console.log(event.target.value);
    },
  },
};
</script>

to add the onChange method that has the event parameter.

In the template, we set @change of the select element to onChange($event) to call onChange when we change the selection in the drop down.

The $event object has the native change event emitted by the select element.

So we can get the latest selected value from event.target.value.

Conclusion

To get selected option on @change with Vue.js, we can set @change to a method that calls $event.