Naive UI的Pagination切换页码后怎么数据没更新?
我在用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,这是哪里出问题了?
currentPage这个变量上。虽然你在handlePageChange里更新了this.currentPage,但因为Vue的响应式机制,:page="currentPage"绑定的值并没有真正触发更新。解决办法很简单,把
:page改成v-model:page,让分页组件和currentPage双向绑定起来。这样当你切换页码时,组件内部会自动更新currentPage的值,而不需要你手动去赋值。代码可以改成这样:
然后在
handlePageChange方法里,你只需要专注调用fetchData就行了,不用再手动给currentPage赋值。改完之后,后端接收到的page参数应该就是正确的当前页码了。顺便吐槽一句,这种坑我之前在WP里面写分页插件的时候也踩过,当时也是折腾了半天才发现是数据绑定的问题。希望这次能帮你少走点弯路。