Vue Tips

#リストを逆順で表示させる

HTML:

<div id="someoneList">

  <some-item v-for="item in reverseItems" v-bind:target="item" v-bind:key="item.id"></some-item>

</div>

someoneList.js:

Vue.component('some-item', {
  props: ['target'],
  template: `<div class="someItem">
    <p class="someDate">{{ target.date }}</p>
    <p>{{ target.content }}</p>
  </div>`
});

let someone = new Vue({
  el: '#someoneList',
  data: function () {
    return {
      someoneList: [
        { id: 0, date: '2019/06/12', content: 'foo' },
        { id: 1, date: '2019/06/19', content: 'bar' }
      ]
    }
  },
  computed: {
    reverseItems: function () {
      return this.someoneList.slice().reverse();
    }
  }
})

重要なのはcomputed:でリストを逆順に展開してるところ。
で、これを呼び出したいので、HTMLのv-forはreverseItemsを書く