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 function calls with $event.
For instance, we write
<template>
<select @change="onChangeMethod($event)">
<option value="test">Test</option>
<option value="test2">Test2</option>
</select>
</template>
<script>
export default {
data() {
return {
//...
};
},
methods: {
onChangeMethod(event) {
console.log(event.target.value);
},
},
created() {
//...
},
};
</script>
to add a select drop down.
And we set @change to onChangeMethod($event), which means onChangeMethod is called with the change event object.
Then when selection changes, we get the selected options’ value attribute value with event.target.value.
Conclusion
To get selected option on @change with Vue.js, we can set @change to a function calls with $event.
