CODEWITHSUNDEEP
vue.jsbootstrap-4paginationvuexbootstrap-vue
novilfahlevy
novilfahlevy

Reputation: 31

Change Bootstrap Vue pagination programmatically

is there any way to change b-pagination in bootstrap-vue programmatically like this:

this.$refs.pagination.goToPage(3) // This is just example

or using the pagination plugin like this:

this.$bvPagination.goToPage('pagination', 3) // This is just example too

I'm trying to find the documentation of the bootstrap-vue pagination plugin but I didn't found it yet. I was thought that has something like $bvPagination as there is $bvModal in modal plugin.

Using v-model didn't work for me, the page was still in page 1.

<b-pagination
   v-model="pagination.currentPage"
   :total-rows="pagination.totalItems"
   first-number
   last-number
   :per-page="pagination.selectedAmount"
/>

in mounted method :

mounted() {
  this.pagination.currentPage = this.$store.state.app.lastPage
}

in watch :

watch: {
  'pagination.currentPage': function (page) {
    this.$store.commit('app/UPDATE_LAST_PAGE', page)
  },
},

Upvotes: 3

Views: 1618

Answers (1)

Romil Lodaya
Romil Lodaya

Reputation: 81

You can add @input in your b-pagination

<b-pagination
   v-model="pagination.currentPage"
   :total-rows="pagination.totalItems"
   first-number
   last-number
   :per-page="pagination.selectedAmount"
   @input="redirectPage"
/>

redirectPage(){
   this.$router.push({path: `/page/${this.currentPage}` });
 }

The input event triggers every time after a value is modified.

So now if you just change the value of currentPage programmatically it should work.

this.currentPage = 3 //this should redirect you since the 
                     //currentPage is changed and redirectPage will be triggered.

This approach basically works with UI as well as programmatically, meaning if user clicks pagination the redirect will trigger else if you change this.currentPage it will work.

Upvotes: 1

Related Questions