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.