Sometimes, we want to pass the selected drop down value to a Vue.js function.
In this article, we’ll look at how to pass the selected drop down value to a Vue.js function.
How to pass the selected drop down value to a Vue.js function?
To pass the selected drop down value to a Vue.js function, we can bind the drop down’s selected value to a reactive property with v-model and then watch that value.
For instance, we write
<template>
<div id="app">
<select name="test" v-model="sorting" @change="sortBy">
<option value="title asc">Title (A-Z)</option>
<option value="title desc">Title (Z-A)</option>
<option value="price asc">Price (Min. - Max.)</option>
<option value="price desc">Price (Max. - Min.)</option>
</select>
</div>
</template>
<script>
//...
export default {
//...
data() {
return {
sorting: null,
};
},
methods: {
sortBy() {
console.log(this.sorting);
},
},
//...
};
</script>
to add a select drop down and we bind the drop down’s selected value to the sorting reactive property with v-model.
And then we listen to the change event and run the sortBy method when it’s triggered with
@change="sortBy"
And then we log the latest value of this.sorting inside the method.
Conclusion
To pass the selected drop down value to a Vue.js function, we can bind the drop down’s selected value to a reactive property with v-model and then watch that value.
