vue分页数据，新增数据时它只在分页的第一个页面新增出来了。

Question

打比这个是我的接口数据，然后我getData函数把数据传给了this.form让它传给了页面并且渲染出来了这些数据，然后这些数据的分页功能也实现了，可是我新增数据之后，数据没有渲染出来。
我想让这个数据可以在我处理数据的时候变更然后再加到列表最后里，页面分页也是在最后，该怎么做？

//////////////////////////////////////////////////////////////
我的数据接收过了，每次在我点击分页之后才会打印出来，而且不能渲染出新的数据

这个add新增是子组件的保存方法。

子组件


子组件保存

子组件接收

这个数据在我父组件页面什么也没做的时候也直接打印出来了，这是正常的吗？

这是新增

数据处理

这里分页处理本来初始数据四条，添加新数据后，每当我改变页数打印出来的数据就是五条。
我这里else的添加改成了楼下给我写的this.form = this.reportList.map((item) => item);之后不会出现在第一页加数据的情况了。

Answer 1

感觉少贴了一些代码，也不能全看出来，就先猜测一个:
什么都没做就打印出来:
你的列表展示的数据是在mounted里调用getData方法来的，应该是因为getData里调用了add方法。

---

本来每页两条数据，现在突然变成了三条四条，每次增加都会更多：
有可能是因为你的this.form和this.reportList指向了同一个，所以this.reportList增加了，你的页面上也就增加了一条

---

Answer 2

首先，getData()里面的this.add()去掉；当数据总数小于每页显示的条数时，循环reportList数据添加到form中，代码如下：

getData() {
    this.totalItems = this.reportList.length;
    if (this.totalItems > this.pageSize) {
        for (let index = 0; index < this.pageSize; index++) {
            this.form.push(this.reportList[index]);
        }
    } else {
        this.form = this.reportList.map(item => item);
    }
}