vue.js - 引导分页 vue.js 直到两次点击后才更新功能

Question

我知道这是一个非常具体的问题，但想知道是否有人可以帮助我。所以现在我目前正在使用位于此链接上的 Bootstrap 中的模块:
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>