javascript - 如何在VUE中反向显示数组？

Question

我有一个简单的数组，其中包含我不时推送新项目的数组。新项目通过ajax;

items.push({id: 1, title: 'a'});
items.push({id: 2, title: 'b'});
items.push({id: 3, title: 'c'});
items.push({id: 4, title: 'd'});

最主要的是我需要反向显示它们，例如:

1. 4，d
2. 3，c
3. 2，b
4. 1，一个

问题是我无法使用unshift，因为我需要对项目有index，因为我需要与特定项目进行交互。

所以基本上我正在寻找一种push项目的方法，但将它们显示为unshift。实际上不是反向数组。

Answer 1

只需使用计算属性即可完成。 reverse 方法将反转数组中的项目，因此我使用 slice 方法创建一个新项目。

至于unshift的事情，更新顺序在你使用push方法的时候就已经有了，所以顺序就跟原来数组反转一样简单，不用担心它。

const app = new Vue({
  el: '#app',
  data: {
    items: []
  },
  computed: {
    reversedArr() {
      return this.items.slice().reverse()
    }
  },
  created() {
    this.items.push({id: 1, title: 'a'})
    this.items.push({id: 2, title: 'b'})
    this.items.push({id: 3, title: 'c'})
    this.items.push({id: 4, title: 'd'})
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<div id="app">
  <div>
    <h3>Original</h3>
    <ul>
      <li v-for="item in items">{{item}}</li>
    </ul>
  </div>
  <div>
    <h3>Reversed</h3>
    <ul>
      <li v-for="item in reversedArr">{{item}}</li>
    </ul>
  </div>
</div>