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

Popular posts from this blog

android - Pass an Serializable object in AIDL -

How to provide Authorization & Authentication using Asp.net, C#? -

How to use Authorization & Authentication in Asp.net, C#? -