Change Bootstrap Vue pagination programmatically

Question

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)
  },
},

Romil Lodaya · Accepted Answer · 2022-04-04 11:12:37Z

1

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.

answered Apr 4, 2022 at 11:12

Romil Lodaya

814 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change Bootstrap Vue pagination programmatically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related