Naive UI的Pagination切换页码后怎么数据没更新?

新艳 Dev 阅读 17

我在用Naive UI的分页组件做数据分页,页面初始化时数据正常显示,但切换页码后数据还是第一页的内容,控制台没报错。我用了@update:page监听页码变化,代码是这样的:

<n-pagination 
  :page="currentPage" 
  :page-count="totalPages" 
  @update:page="handlePageChange"
/>

在methods里写了

handlePageChange(newPage) {
  this.currentPage = newPage
  this.fetchData() // 这个方法请求数据
}

但调试发现fetchData确实执行了,传给后端的page参数却一直是1,这是哪里出问题了?

我来解答 赞 1 收藏
二维码
手机扫码查看
1 条解答
Mr-景川
Mr-景川 Lv1
你这个问题其实跟Naive UI没啥关系,问题出在你的currentPage这个变量上。虽然你在handlePageChange里更新了this.currentPage,但因为Vue的响应式机制,:page="currentPage"绑定的值并没有真正触发更新。

解决办法很简单,把:page改成v-model:page,让分页组件和currentPage双向绑定起来。这样当你切换页码时,组件内部会自动更新currentPage的值,而不需要你手动去赋值。

代码可以改成这样:

<n-pagination 
v-model:page="currentPage"
:page-count="totalPages"
@update:page="handlePageChange"
/>


然后在handlePageChange方法里,你只需要专注调用fetchData就行了,不用再手动给currentPage赋值。改完之后,后端接收到的page参数应该就是正确的当前页码了。

顺便吐槽一句,这种坑我之前在WP里面写分页插件的时候也踩过,当时也是折腾了半天才发现是数据绑定的问题。希望这次能帮你少走点弯路。
点赞 1
2026-02-16 00:11