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

w00ngy · Accepted Answer · 2018-10-02 05:09:34Z

35

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

edited Oct 2, 2018 at 5:09

w00ngy

1,84825 silver badges27 bronze badges

answered Jul 7, 2015 at 15:55

Needpoule

4,58626 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

rmagnum2002 Over a year ago

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.

Needpoule Over a year ago

Ok, i think I understand, I'll edit my answer and add a other possible solution.

rmagnum2002 Over a year ago

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.

Bryan Miller Over a year ago

#2 worked great for me, butI had to use v-on:change="sortBy" instead

Needpoule Over a year ago

@user3089840 I edit my answer to use the current event syntax. (a bit late maybe :) )

Kundan Kumar · Accepted Answer · 2019-03-21 16:44:08Z

6

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, 2019 at 16:44

Kundan Kumar

1141 silver badge2 bronze badges

1 Comment

nabrown Over a year ago

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.

Bharat Suryawanshi · Accepted Answer · 2018-10-17 05:38:11Z

1

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>

answered Oct 17, 2018 at 5:38

Bharat Suryawanshi

614 bronze badges

Comments

jeidison farias · Accepted Answer · 2019-06-10 14:15:13Z

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, 2019 at 14:15

jeidison farias

4885 silver badges9 bronze badges

Collectives™ on Stack Overflow

Pass selected value to vuejs function

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related