Passing parameters to .sort function in Vue.js

Question

I am creating a sort by select option for my Vue.js app and trying to work out how to pass a selected value to a computed function. I can get the function to sort with a hardcoded value from the array, but I want to work ahead to pass in a sort order by the user input e.g. Sort by 'Price'

With a bit of research I have found some posts about passing in values, but to no avail. Any help would be appreciated.

Working code

computed: {
    computedObj() {
    
      return this.endpg
        ? this.filteredList.slice(this.startpg, this.endpg)
        : this.lists;
        /* return _.orderBy(this.users, 'name') */
    },
      filteredList() {
      return this.lists.filter((item) => {
        return (
          item.address.toLowerCase().includes(this.search.toLowerCase()) &&
          (this.selectBedrooms.length === 0 || this.selectBedrooms.includes(item.bedrooms))
        );
      }).sort(function (a, b) {return a.price - b.price})   
    },  
},

Tried everyones code to date but no joy.

Amaarockz · Accepted Answer · 2021-01-14 15:19:12Z

1

you can pass the selectSort like this

filteredList() {
  return selectSort => {
      return this.lists.filter((item) => {
        return (
          item.address.toLowerCase().includes(this.search.toLowerCase()) &&
          (this.selectBedrooms.length === 0 || this.selectBedrooms.includes(item.bedrooms))
        );
      }) .sort(function (a, b) {return a[selectSort] - b[selectSort]}) 
    }
  }

This is how you call it

filteredList('price')

in this way whatever value that you pass will be captured into the selectSort variable of the computed property

answered Jan 14, 2021 at 15:19

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

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

4 Comments

Amaarockz Over a year ago

@insomniac22 - Great! If it works for you and you are happy - then in general you would accept the answer. This will not only help other people with the same issue but it will also mean people are more likely to help you in the future with any other issues you have. You can read about accepting here: stackoverflow.com/help/accepted-answer

insomniac22 Over a year ago

Thanks for the answer, I know to approve answer once they are a solution. I have looked at the code and tried some stuff but ultimately its throwing my whole page out. I pass this data to a pagination function that uses a slice function that is now failing. ``` return this.endpg ? this.filteredList.slice(this.startpg, this.endpg) : this.lists;``` I am learning so bear with me.

Amaarockz Over a year ago

Okay if you have other issues as well, feel free to post it...btw I hope that your base issue (ie) passing argument to a computed property is fixed :)

insomniac22 Over a year ago

I cant get the code to work, I have update the code above with the function and the function that paginates the updated data, but the issue is still with the sort function, very annoying as it should be simple.

cymruu · Accepted Answer · 2021-01-14 16:20:59Z

0

Put your selectSort in component data, if used in computed it will reevaluate everytime it's value change

Then your computed function should be

filteredList() {
      return this.lists.filter((item) => {
        return (
          item.address.toLowerCase().includes(this.search.toLowerCase()) &&
          (this.selectBedrooms.length === 0 || this.selectBedrooms.includes(item.bedrooms))
        );
      }) .sort(function (a, b) {return a[this.selectSort] - b[this.selectSort]})  
    },

edited Jan 14, 2021 at 16:20

answered Jan 14, 2021 at 15:21

cymruu

3,0482 gold badges15 silver badges25 bronze badges

2 Comments

insomniac22 Over a year ago

Thanks for the suggestion, this is producing an error: 208:16 error 'selectSort' is defined but never used. Im using the function in computed: Im a bit lost on what you mean by the component data comment, I will use this code off the back of a drop down selection so I am happy for it to change on user input. Is that what you mean?

insomniac22 Over a year ago

Still get the same error with the updated code buddy.

insomniac22 · Accepted Answer · 2021-01-26 13:45:25Z

0

I found a great solution for this problem, https://codesandbox.io/s/oq397npryq?file=/src/components/Products.vue:110-126

Uses a group of const items to populate the sort function.

answered Jan 26, 2021 at 13:45

insomniac22

15115 bronze badges

Collectives™ on Stack Overflow

Passing parameters to .sort function in Vue.js

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related