How to sort array with 2 fields in Vue?

Question

So I have this table:

And I use this vue2 filter library and I can only sort by a single field using that.

What I wanted to do is to sort the array in descending order using the score and time_consumed field. The higher the score and shorter the time_consumed, the higher the place.

In the example above, the order should look like;

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

I used the orderBy filter from the library but I can only sort by score using

v-for="u in orderBy(users, 'score', -1)"

Is there a simpler way to do this? Any help would be much appreciated.

Bert · Accepted Answer · 2017-06-25 15:13:46Z

5

Use a computed value to sort your scores.

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>

The sorter works on both values because if the scores are equal, it will end up using the time_consumed.

answered Jun 25, 2017 at 15:13

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Collectives™ on Stack Overflow

How to sort array with 2 fields in Vue?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related