Vue.js: 根据方法对列表进行排序

Question

我正在获取一些原始数据并显示项目列表。每个项目都有一个复杂的属性，我用一种方法生成它（不是计算的属性）。属性可能会根据用户输入而改变。是否可以根据属性对列表中的项目进行排序？

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

因此每个项目都有一个时间值，该值由全局动态因素 "distance" 控制。这个想法是在 "distance" 更改时自动对项目进行排序，并更新 "speed" 属性。这可能吗？

Answer 1

这个怎么样？

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

模板

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

Answer 2

模板

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

vue js

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

Vue.js: 根据方法对列表进行排序

Vue.js: Sort a list based on method

javascript

sorting

vue.js

v-for