Pass selected value to vuejs function

Question

How can I pass selected value to a vuejs function? v-model won't help I guess.

I need to set values for the filter after 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 (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)
    }
  }

score 34 · Accepted Answer · edited Oct 02 '18 at 05:09

You have several ways to do it.

Edit: Improved 2)

It is possible to use v-model just like in 2) but instead of using the value directly in your orderBy filter, you can use computed 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
        }
    }
}

This way, sortKey and sortOrder will be available like a normal property in you filter:

v-repeat="items | orderBy sortKey sortOrder"

1) Use javascript event:

If you don't specify any parameter, the native event object will be passed automatically

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

You can then use it like this:

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

2) Using v-model

You can add the v-model directive

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

This way the sorting value will be updated on every change.

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

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

You can then access the value like in your method:

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

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

3) Other weird way

You can apparently use your model value as a parameter.

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

This is working but I don't really see the point.

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

Thank you so much, I will try it tomorrow at the office. The reason I am not using v-model is because the value contains the sort direction as well, like asc or desc. If I use `v-model` vue will try to sort the results base on for example `title asc` attribute that doesn't exists, so I want to send the selected value to a function, split it and use title as sort attribute and asc or desc as direction. I hope it makes sense what I am saying. Thank you. — rmagnum2002, Jul 07 '15 at 16:22
Ok, i think I understand, I'll edit my answer and add a other possible solution. — Needpoule, Jul 08 '15 at 07:15
One thing to add, `sortOrder` should be a boolean type, true/false, so I had to check if sortOrder equal asc: `return this.sorting.split(' ')[1] === 'asc' ? false : true` it won't accept other values than boolean for 3d parameter in the filter. Thank you. — rmagnum2002, Jul 08 '15 at 08:32
#2 worked great for me, butI had to use v-on:change="sortBy" instead — Bryan Miller, Apr 08 '16 at 22:38
@user3089840 I edit my answer to use the current event syntax. (a bit late maybe :) ) — Needpoule, Jul 21 '17 at 07:52

score 5 · Answer 2 · answered Mar 21 '19 at 16:44

5

This should work if you want to loop with dynamic values and can not use 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>

answered Mar 21 '19 at 16:44

Kundan Kumar

104
1
2

This is just what I was looking for. A way to pass not the entire event (as Vue does by default) but just the value. That way I can share the handler function with elsewhere in the code that doesn't have an event. – nabrown Aug 29 '21 at 16:57

score 1 · Answer 3 · answered Oct 17 '18 at 05:38

If you want to pass selected value to a vuejs function, Please do the following :

you need to use v-model directive in select tag as v-model = variableName
pass that variable as parameter like @on-change=sortBy(variableName);

So your code will look like :

<select class="sort-filter" v-model="sortingVariable" @on-change="sortBy(sortingVariable)"> 
   <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>

score 1 · Answer 4 · answered Jun 10 '19 at 14:15

1

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);
}

answered Jun 10 '19 at 14:15

jeidison farias

490
5
9

Pass selected value to vuejs function

4 Answers4

Linked