I'm fetching some raw data and displaying a list of items. Each item has a plex property that I generate with a method (which is not a puted property). That property might change on user input. Is it possible to sort the items of the list based on that property?

HTML:

<ul>
  <li v-for="item in items">
    <span>{{ calculateComplexProperty(item.time) }}</span>
  </li>
</ul>

JavaScript:

calculateComplexProperty: function (time) {
  // this.distance is an external factor that is not a property of the list item, 
  // and that can be manipulated by the user
  var speed = time * this.distance;

  return speed;
}

So each item has a time value that is manipulated by a global, dynamic factor, "distance". The idea is to automatically sort the items whenever the "distance" changes and also, to update the "speed" property. Is this possible?

I'm fetching some raw data and displaying a list of items. Each item has a plex property that I generate with a method (which is not a puted property). That property might change on user input. Is it possible to sort the items of the list based on that property?

HTML:

<ul>
  <li v-for="item in items">
    <span>{{ calculateComplexProperty(item.time) }}</span>
  </li>
</ul>

JavaScript:

calculateComplexProperty: function (time) {
  // this.distance is an external factor that is not a property of the list item, 
  // and that can be manipulated by the user
  var speed = time * this.distance;

  return speed;
}

So each item has a time value that is manipulated by a global, dynamic factor, "distance". The idea is to automatically sort the items whenever the "distance" changes and also, to update the "speed" property. Is this possible?

• javascript
• sorting
• vue.js
• v-for

Share Improve this question Follow edited May 3, 2017 at 2:17 Garrett Kadillak 1,06099 silver badges1818 bronze badges asked May 2, 2017 at 22:36 svensven 59966 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

How about this?

puted:{
    sortedItems(){
        return this.items.sort((a,b) => 
             this.calculateComplexProperty(a.time) - this.calculateComplexProperty(b.time))
    }
}

Template

<li v-for="item in sortedItems">

Template

<li v-for="item in sortedItems(items)">

vue js

puted:{
    sortedItems(items){
        return _.orderBy(items, 'time', 'asc');
    }
}