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而不是使用click事件。

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

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

1 个答案: