CODEWITHSUNDEEP
vue.jsvuexbootstrap-vue
Michael Gee
Michael Gee

Reputation: 541

bootstrap pagination vue.js doesn't update function until after two clicks

I know this is a very specific question but was wondering if someone could help me. So right now I am currently using a module from bootstrap located on this link right here:

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

I am currently having the trouble where I am trying to dispatch an action that is reliant on the currentPage variable.

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

currentPage is set to 1 as of right now like so:

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

Here is a method so that I can update the page within my VueX store. So first I dispatch a method within my Vue file:

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

And then within my VueX store I use this function to commit:

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

I then use a mutation to finally update the state data:

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

So what I want it to do is that everytime I click on a page number I get to update the page number within the vuex store immediately when you press on any of the page numbers. However, it decrements and increments a step behind everytime I click on a page number.

examples:

If I click page number 2 twice it will update the store data to page number 2

And if you click page 2 and then page 1 it will show that the store's page number is at page 2.

So it is pretty much a step behind. If anyone can push me to the right direction that would help so much. Thanks!

Upvotes: 4

Views: 5403

Answers (1)

Michael Gee
Michael Gee

Reputation: 541

Never mind I solved it I pretty much used @input rather than using a click event. 

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

Upvotes: 6

Related Questions