vue.js - Pass selected value to vuejs function -
how can pass selected value vuejs function? v-model won't guess.
i need set values filter after item: items | orderby sortkey reverse reverse , sortkey dynamic values.
html
<select class="sort-filter" v-on="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> js
methods: { sortby: function (sortkey) { console.log(sortkey) } }
you have several ways it.
edit: improved 2)
it possible use v-model in 2) instead of using value directly in orderby filter, can use computed proprieties
computed: { sortkey: { get: function() { return this.sorting.split(' ')[0]; // return key part } }, sortorder: { get: function() { return this.sorting.split(' ')[1]; // return order part } } } this way, sortkey , sortorder available normal propriety in filter:
v-repeat="items | orderby sortkey sortorder" 1) use javascript event:
if don't specify parameter, native event object passed automatically
<select class="sort-filter" v-on:change="sortby"> you can use this:
methods: { sortby: function(e) { console.log(e.target.value); }, } 2) using v-model
you can add v-model directive
<select name="test" v-model="sorting" v-on:change="sortby"> this way sorting value updated on every change.
you can add value in data object of viewmodel more clear:
data: { sorting: null // updated when select value change } you can access value in method:
methods: { sortby: function() { console.log(this.sorting); }, } if need update sortkey value, method not necessary.
3) other weird way
you can apparently use model value parameter.
<select name="test" v-model="sortkey" v-on:change="sortby(sortkey)"> this working don't see point.
methods: { sortby: function(sortkey) { console.log(sortkey); }, }
Comments
Post a Comment