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

令狐新霞提问于 2026-02-07 09:23:31 阅读 37

组件

用Naive UI的Pagination组件做分页，切换页码时数据没变化，页面还是第一页的内容。

在Vue组件里绑定了page变量，通过@update:page="fetchData"监听事件，调接口时传了当前页码参数，但切换到第二页后控制台没有看到新的请求。

代码结构大概是这样的：


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

尝试在fetchData里打印了currentPage，发现变量确实在变化，但后端返回的数据始终是第一页。总页数是根据接口返回的总条数算出来的，这部分没问题。

Naive UI

我来解答赞 2 收藏

反馈

2 条解答

长孙珍珍 Lv1

问题出在没正确传递页码参数，后端拿不到更新的页码。
改 fetchData 方法，确保传的是 currentPage，像这样：

const fetchData = async () => {

  const res = await api.getData({ page: currentPage.value });

  data.value = res.data;

};

如果 currentPage 是响应式对象，记得加 .value。就这样。

2026-02-16 10:10

W″梓涵 Lv1

这个问题我之前也踩过，其实问题出在监听事件的方式上。你用了@update:page="fetchData"，但Naive UI的Pagination组件在切换页码的时候，v-model绑定的page是异步更新的。你在fetchData里打印currentPage，虽然能看到变化，但其实在这次事件循环里，它还没有真正更新到最新的值。

解决办法很简单，别走弯路，在调用fetchData的时候，直接把新的页码作为参数传进去，而不是依赖currentPage的值。你可以这样改：

v-model:page="currentPage"
:page-count="totalPages"
@update:page="fetchData"
/>

然后在你的方法里：

fetchData(newPage) {
console.log(newPage) // 这里就能拿到最新的页码
// 调接口传newPage就行了
}

这样就不用依赖可能还没更新的响应式变量了。

还有一个可能的原因是：你可能在created或者mounted里初始化数据的时候，没有把currentPage作为初始参数传进去，导致第一次请求和后续请求参数不一致。建议统一用同一个方法处理，比如在mounted里调一下fetchData(currentPage)

总之就是一句话：别在@update:page里依赖v-model绑定的变量，直接用事件传出来的参数最靠谱。

2026-02-07 09:26