引导分页 vue.js 在两次点击后才会更新功能

Question

我知道这是一个非常具体的问题，但想知道是否有人可以帮助我。所以现在我正在使用位于此链接上的引导程序中的模块：

https://bootstrap-vue.js.org/docs/components/pagination/

我目前在尝试调度依赖于 currentPage 变量的操作时遇到麻烦。

<bPagination align="right" :total-rows="100" v-model="currentPage" :per-page="10" @click.native =" updatePage(currentPage); loadParticipants()"></bPagination>

目前 currentPage 设置为 1，如下所示：

 data() {
  return {
    currentPage: 1,
    tag: '',
    tags: [],
    ....

这是一种方法，可以让我更新 VueX 商店中的页面。首先，我在 Vue 文件中调度一个方法：

updatePage: function(page){ this.$store.dispatch('updatePage', page); console.log("Hit me") },

然后在我的 VueX 商店中我使用这个函数来提交：

updatePage({ commit }, updatePage) { commit('updatePage', updatePage); }

然后我使用突变来最终更新状态数据：

updatePage: (state, updatePage) => { state.page = updatePage; }

所以我想要它做的是，每次我点击页码时，当您按下任何页码时，我都会立即更新 vuex 存储中的页码。但是，每次我单击页码时，它都会减少和增加一步。

例子：

如果我点击第 2 页两次，它会将商店数据更新到第 2 页

如果您单击第 2 页，然后单击第 1 页，则会显示商店的页码位于第 2 页。

所以它几乎落后了一步。如果有人能把我推向正确的方向，那会有很大帮助。谢谢！

Answer 1

没关系，我解决了它，我几乎使用@input，而不是使用点击事件。

<bPagination align="right" :total-rows="100" v-model="currentPage" :per-page="10" @input =" updatePage(currentPage); loadParticipants()"></bPagination>