分页组件切换页码后数据没更新，是怎么回事？

___素红提问于 2026-02-04 10:23:36 阅读 49

组件

在做列表分页时用了ant-design的Pagination组件，切换页码后控制台能看到请求参数正确，但页面数据还是第一页的内容。

代码结构是这样的：current={currentPage}绑定了数据，点击页码时触发handlePageChange方法：


handlePageChange(page) {
  this.currentPage = page;
  this.fetchData(page); // 调用数据请求方法
}

数据请求用axios封装的，返回数据后直接赋值给items数组。尝试过加setTimeout模拟延迟发现数据确实没变，但控制台打印的请求参数是正确的。

之前试过把currentPage改成计算属性，或者在fetchData里加console.log(page)，发现参数是传进去了。是不是需要手动触发更新？或者分页组件有什么特别的使用方式？

反馈组件

我来解答赞 9 收藏

反馈

1 条解答

IT人志丹 Lv1

你currentPage改了但没触发请求，分页组件current要绑定到响应式数据上。改成这样：

data() {

  return {

    currentPage: 1,

    items: []

  }

},

methods: {

  handlePageChange(page) {

    this.currentPage = page

    this.fetchData(page)

  },

  fetchData(page) {

    // 你的请求逻辑

  }

}

2026-02-04 11:01