分页组件点击页码后数据没更新怎么办？

轩辕明轩提问于 2026-03-13 19:25:19 阅读 5

组件

我用 Vue 写了个分页组件，点击页码时 currentPage 确实变了，但列表数据还是老的，没重新请求接口。是不是漏了啥？

我在 watch 里监听了 currentPage，也调了 fetchList 方法，但好像没触发。代码大概是这样：

watch: {
  currentPage(newVal) {
    this.fetchList(newVal);
  }
},
methods: {
  handlePageChange(page) {
    this.currentPage = page;
  },
  async fetchList(page) {
    const res = await api.getList({ page });
    this.list = res.data;
  }
}

控制台也没报错，就是页面不动，求指点！

反馈组件

我来解答赞 0 收藏

反馈

1 条解答

艳艳酱~ Lv1

这个问题挺典型的，我来分析一下最可能的原因和解决办法。

最常见的问题是：你这个watch的写法在某些情况下可能不会触发。Vue的watch默认只在值真正改变时触发，但如果currentPage初始化就是1，用户又点击了1，值没变，watch就不会触发。

不过更稳妥的做法是直接在你的点击处理函数里调用fetchList，别依赖watch：

methods: {

  handlePageChange(page) {

    // 直接在这里调，不用等watch

    this.currentPage = page;

    this.fetchList(page);

  },

  async fetchList(page) {

    try {

      const res = await api.getList({ page });

      this.list = res.data;

    } catch (e) {

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

    }

  }

}

这样最直接，不会有watch触发时机的问题。

如果你想保留watch的写法，建议加上immediate选项确保初始化时也执行一次：

watch: {

  currentPage: {

    handler(newVal) {

      this.fetchList(newVal);

    },

    immediate: true  // 关键：组件创建时立即执行一次

  }

}

但我建议你用第一种方式，代码更清晰，逻辑也更直观。

另外检查一下你的API调用部分有没有问题，加个try catch看看是不是请求本身出了错但没抛出来。

还有一个小坑：确认一下你的分页组件emit的事件名是不是page-change，有些组件用的是change或者其他名字，你绑定的方法名要对上。

2026-03-13 20:03