3

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

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 页。

因此，它几乎落后了一步。如果有人可以将我推向正确的方向，那将大有帮助。谢谢！

4

1 回答 1

5

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

<bPagination align="right" :total-rows="100" v-model="currentPage" :per-page="10" @input =" updatePage(currentPage); loadParticipants()"></bPagination>
于 2018-08-02T23:26:14.237 回答