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

Posted 2023-02-22

【中文标题】引导分页 vue.js 直到两次点击后才更新功能

【英文标题】：bootstrap pagination vue.js doesn't update function until after two clicks

【发布时间】：2019-01-10 18:32:57

【问题描述】：

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

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

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

【参考方案1】：

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

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

【讨论】：

谢谢，它帮助我弄清楚了！在 vue 文档中找不到有关 @input 的信息。

@AlexanderKim, @input 完全等同于 html 中的 onInput。它为输入事件指定了一个处理程序。