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">

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

Answer 1

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

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

Answer 2

您也可以通过这种方式进行设置：

this.$set(this, 'invites', this.invites.slice(start, end).reverse());

VueJS分页不会更改数据

2 个答案: