Pass the selected value to the vuejs function

Question

How to pass selected value to vuejs function? v-model will not help me.

I need to set the values ​​for the filter after item: items | orderBy sortKey reverse item: items | orderBy sortKey reverse where reverse and sortKey are dynamic values.

HTML

 <select class="sort-filter" v-on="change: sortBy(???)"> <option value="title asc">Title (AZ)</option> <option value="title desc">Title (ZA)</option> <option value="price asc">Price (Min. - Max.)</option> <option value="price desc">Price (Max. - Min.)</option> </select> 

Js

  methods: { sortBy: function (sortKey) { console.log(sortKey) } } 

Answer 1

You have several ways to do this.

Edit: Improved 2)

You can use the v-model, as in 2), but instead of using the value directly in your orderBy filter, you can use calculated properties

 computed: { sortKey: { get: function() { return this.sorting.split(' ')[0]; // return the key part } }, sortOrder: { get: function() { return this.sorting.split(' ')[1]; // return the order part } } } 

Thus, sortKey and sortOrder will be available as a regular property in your filter:

 v-repeat="items | orderBy sortKey sortOrder" 

1) Use the JavaScript event:

If you do not specify any parameter, your own event object will be transferred automatically

 <select class="sort-filter" v-on:change="sortBy"> 

Then you can use it like this:

 methods: { sortBy: function(e) { console.log(e.target.value); }, } 

2) Using the v-model

You can add v-model directive

 <select name="test" v-model="sorting" v-on:change="sortBy"> 

Thus, the sorting value will be updated with every change.

You can add this value to the data object of your ViewModel to be more clear:

 data: { sorting: null // Will be updated when the select value change } 

Then you can access the value, as in your method:

 methods: { sortBy: function() { console.log(this.sorting); }, } 

If you just need to update the sortKey value, this method is not even needed.

3) Another weird way

Obviously, you can use the value of your model as a parameter.

 <select name="test" v-model="sortKey" v-on:change="sortBy(sortKey)"> 

It works, but I don't see the point.

 methods: { sortBy: function(sortKey) { console.log(sortKey); }, } 

Answer 2

If you want to pass the selected value to the vuejs function, follow these steps:

1. you need to use the v-model directive in the select tag, since v-model = variableName
2. pass this variable as a parameter, for example @ on-change = sortBy (variableName);

So your code will look like this:

 <select class="sort-filter" v-model="sortingVariable" @on-change="sortBy(sortingVariable)"> <option value="title asc">Title (AZ)</option> <option value="title desc">Title (ZA)</option> <option value="price asc">Price (Min. - Max.)</option> <option value="price desc">Price (Max. - Min.)</option> </select> 

Answer 3

This should work if you want to execute a loop with dynamic values ​​and cannot use the v-model

 <select name="option" v-on:change="selectedOption($event.target.value)"> <option value="0">SELECT</option> <option v-for="i in 10" :value="i">{{ i }}</option> </select> 

Answer 4

try

 <select name="option" @change="myFunction($event.target.value)"> <option v-for="item in list" :value="item.code" :key="item.code">{{ item.name }}</option> </select> // Function myFunction(value) { console.log(value); }