vue.js - VueJS分页不会改变数据

Question

我有一组数据并试图用这些数据进行分页。问题是，当我单击下一页时，屏幕上的数据没有改变，但我在 console.log 中获得了所需的数据

这是组件：

数据：

data: () => {
    return {
        invites: [] // Data array
        size: 2
    }
},

更改数据的方法：

methods: {
    currentPage(pageNum) {
        const start = pageNum * this.size;
        const end = start + this.size;

         this.invites.slice(start, end).reverse();
    }
},

现在，当我这样做时，我console.log(this.invites.slice(start, end).reverse())从应该显示在屏幕上的数组中获取数据。这是v-for循环：

<li v-for="invite in invites.slice(0, 2).reverse()" :key="invite.id">

它向我显示了前两个结果，但是当我触发更改数据的方法时它没有改变

标签： vue.js

Answer 1

请看slice，它有一个返回值。在您的currentPage方法中，将返回值分配给invitesdata 属性。

this.invites = this.invites.slice(start, end).reverse();