Vue.js v-for レンダリングの並び順を変える（昇順、降順）

やりたいこと

Vue.js　v-for　レンダリングの並び順を変えたい（昇順、降順）

実装（昇順）

まずは昇順。
こちらは普通にv-for を実装する。

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <p>名前：{{item.name}}さん</p>
      <p>会員番号：{{item.id}}番</p>
      <p>##########</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        items:[
          {
            id: 1,
            name: '太郎',
          },
          {
            id: 2,
            name: '次郎',
          },
          {
            id: 3,
            name: '三郎',
          },
        ],
    }
  },
}
</script>

実行結果は以下のようになります

名前：太郎さん
会員番号：1番
##########
名前：次郎さん
会員番号：2番
##########
名前：三郎さん
会員番号：3番
##########

では、降順（順番を逆）にしたい場合はどうするか

実装（降順）

降順にしたい場合は、computedで配列の順番を入れ替えて、v-forに渡します。

<template>
  <div>
    <div v-for="item in reverseItems" :key="item.id">
      <p>ニックネーム：{{item.name}}さん</p>
      <p>会員番号：{{item.id}}番</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        items:[
          {
            id: 1,
            name: '太郎',
          },
          {
            id: 2,
            name: '次郎',
          },
          {
            id: 3,
            name: '三郎',
          },
        ],
    }
  },
  computed: {
    reverseItems() {
      return this.items.slice().reverse();
    },
  }
}
</script>

そうすると、実行結果は以下のようになります

名前：三郎さん
会員番号：3番
##########
名前：次郎さん
会員番号：2番
##########
名前：太郎さん
会員番号：1番
##########

以上です！