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

Posted 2023-02-16

【中文标题】Vue.js：根据方法对列表进行排序

【英文标题】：Vue.js: Sort a list based on method

【发布时间】：2017-09-30 14:12:28

【问题描述】：

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

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;

因此，每个项目都有一个由全局动态因素“距离”操纵的时间值。这个想法是在“距离”发生变化时自动对项目进行排序，并更新“速度”属性。这可能吗？

【参考方案1】：

这个怎么样？

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

模板

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

【参考方案2】：

模板

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

vue js

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