如何在Vue中对包含2个字段的数组进行排序?

时间:2017-06-25 06:33:00

标签: javascript arrays sorting vue.js computed-properties

所以我有这张桌子:

enter image description here

我使用这个vue2 filter library,我只能用一个字段排序。

我想要做的是使用scoretime_consumed字段按降序对数组进行排序。分数越高,时间消耗越短,地点越高。

在上面的示例中,订单应该如下;

1. 12 | 10141
2. 5 | 15233
3. 5 | 16233
4. 3 | 11495

我使用了库中的orderBy过滤器,但我只能使用

按分数排序
v-for="u in orderBy(users, 'score', -1)"

有更简单的方法吗?任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:3)

使用计算值对分数进行排序。



console.clear()

const scores = [
  {
    score: 3,
    time_consumed: 11495
  },
  {
    score: 5,
    time_consumed: 16233
  },
  {
    score: 5,
    time_consumed: 15233
  },
  {
    score: 12,
    time_consumed: 10141
  },
]

new Vue({
  el:"#app",
  data:{
    scores
  },
  computed:{
    sortedScores(){
      const sorter = (a,b) => b.score - a.score || a.time_consumed - b.time_consumed
    
      return this.scores.sort(sorter)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
  <table>
    <tr v-for="score in sortedScores">
      <td>{{score.score}}</td>
      <td>{{score.time_consumed}}</td>
    </tr>
  </table>
</div>
&#13;
&#13;
&#13;

分拣机对这两个值起作用,因为如果分数相等,它将最终使用time_consumed。