降順で並べ替えたあとで要素を5つにしたいです。

useritemsにはいっている要素を降順で並べ替え変えた後、要素を5つにしたいです。
降順にする所までできましたが、その後要素を5つにする所が分かりません。
どなたかアドバイスいたただければと思います。m(__)m

<template>
      <thead>
        <tr>
          <th>番号.</th>
          <th>名前</th>
          <th>回数</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in useritems" :key="index">
          <td>{{ index+1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.times }}</td>
        </tr>
      </tbody>
</template>
<script>
export default {
  data () {
    return {
      useritems: []
    }
  },
 mounted () {
    this.getUserList()
      .then((response) => {
      }).catch((error) => {
        console.log(error)
      })
  },
 methods: {
    async getUserList() {
<<<中略>>>
this.useritems.sort(function (a, b) {
          if (a.count > b.count) { return -1 }
          if (a.count < b.count) { return 1 }
          return 0
        })

行動規範の内容に同意します

回答2件

2つの場合が考えられ、それぞれのコードを回答します。
（いずれもsortに与える比較関数をより短く書いています。）

(1) 配列this.useritems自体を降順にソートして、かつ長さを5に詰める。

javascript
1
2this.useritems.sort(({count: a}, {count: b}) => b - a).splice(5);
3

(2) 配列this.useritems自体（の要素の順序や長さ）を変更せずに、this.useritemsの（浅い）コピーを作り、それを降順ソートして先頭5個のみにしたものを得る。

javascript
1[...this.useritems].sort(({count: a}, {count: b}) => b - a).slice(0, 5)

投稿2021/12/01 08:52

退会済みユーザー

総合スコア0

anzi1230

2021/12/03 01:26

こんな書き方ができるんですね。。φ(..)メモメモ教えて頂いてありがとうございます！

行動規範の内容に同意します

ベストアンサー

何となくやけどuseritemsは触らないほうがよくない？
computed内で一回変数に受けてそっち使えば？

https://jsfiddle.net/w9pLcod8/

html
1 <tr v-for="(item, index) in sorted5" :key="index">

javascript
1  computed: {
2    sorted5() {
3      var arr = this.useritems.concat()
4      arr.sort(function(a, b) {
5        if (a.count > b.count) {
6          return -1
7        }
8        if (a.count < b.count) {
9          return 1
10        }
11        return 0
12      })
13      arr = arr.slice(0,5)
14      return arr
15    }
16  }