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.
