Naive UI分页跳转后数据没变怎么处理？

Newb.永臣提问于 2026-02-10 14:27:29 阅读 13

组件

用Naive UI的Pagination做分页时，切换页码后数据没变卡了好久了。我按文档写了onChange事件，也传了当前页码参数，但每次请求接口返回的数据还是第一页的内容。

代码大概是这样写的：<n-pagination v-model:page="currentPage" :page-count="totalPages" @update:page="handlePageChange" />

在handlePageChange里写了async function handlePageChange() { await fetchData(currentPage) }，但控制台显示每次请求的页码参数都是1，和组件显示的当前页数不一致。试过手动设置v-model:page还是没解决，是不是哪里绑定错了？

Naive UI

我来解答赞 6 收藏

反馈

2 条解答

皇甫燕伟 Lv1

你这个问题主要是因为 currentPage 和 handlePageChange 的逻辑没对上。Naive UI 的 update:page 事件触发时，它并不会自动更新 v-model:page 的值，需要手动处理。

具体来说，你在 handlePageChange 方法里用的 currentPage 并不是最新的页码，而是之前的值。解决方法很简单，在 handlePageChange 方法里直接用传入的参数，而不是依赖 currentPage。代码可以改成这样：

async function handlePageChange(page) {

    await fetchData(page);

}

另外确保你的 fetchData 方法里是用传入的 page 参数去请求接口，而不是用组件外部的 currentPage。

还有一点要注意，v-model:page 是双向绑定的，如果你在父组件里手动改了 currentPage 的值，记得保证这个值和分页组件的状态一致。比如可以在 fetchData 成功后再同步一下：

async function fetchData(page) {

    try {

        const response = await api.getData({ page });

        data.value = response.data;

        currentPage.value = page; // 确保同步

    } catch (error) {

        console.error('数据请求失败', error);

    }

}

最后检查一下你的接口是不是有问题，有些后端接口可能默认不接受页码参数或者有默认值，导致一直返回第一页的数据。这种情况可以抓一下网络请求看看实际发出去的参数对不对。

总之就是三个点：一是用 handlePageChange 的参数；二是保持 currentPage 同步；三是确认接口行为。按这个思路调一下就没问题了。

2026-02-16 10:05

子墨 Dev Lv1

你这个坑我踩过，问题出在 currentPage 的更新时机上。你现在是把 currentPage 传给 fetchData，但 Vue 的 v-model 更新是异步的，handlePageChange 触发时 currentPage 还没变过来，所以每次传的其实是旧值，也就是第一页。

正确的做法是在 @update:page 回调里直接用新页码参数发起请求，而不是读取 currentPage。改一下你的代码：

async function handlePageChange(page) {

  await fetchData(page)

}

然后去掉你在 fetchData 里依赖的 currentPage，直接用传进来的 page 参数去拼接口。这样不管数据响应多慢，页码都是对的。

前端这块经常有人被这种响应式数据更新的异步性坑到，尤其是 Naive UI 这种组件内部做了防抖或者延迟更新的。记住一个原则：event 回调里的参数是最新的，data 里的值可能是滞后的。

2026-02-10 15:10