Pagination Navigation does not update currentPage despite value being changed

Mac OSX: 10.11.6 | Chrome: 64.0.3282.119 | Bootstrap Vue: ^1.4.0

I have my Page Navigation setup like so:

<b-pagination-nav
      :link-gen="linkGen"
      :v-model="currentPage"
      :number-of-pages="totalPages"
      :hide-goto-end-buttons="hideNavEndButtons"
      align="center"
      @input="changeAvailablePage" />

with my wrapper component data like so:

data() {
    return {
           hideNavEndButtons: true,
           currentPage: 1,
           totalPages: 1,
    }
},

I save my page settings at points to the url to allow for the link to be shared and the receiving user to have the same view of the table.

So when loading the wrapper component I parse the url and update the currentPage and totalPages:

loadFromURL() {
    ....
    this.currentPage = urlData.currentPage;
    ...
}

While inspecting the component in the browser using the Vue extension for Chrome, I’m seeing the currentPage updates in the wrapper component, but it does not update in the Procedure Navigation component. This means the the Page Navigation component continues to show the wrong page number highlighted (page 1, while the this.currentPage reflects 3).

My expectation is that if I update the data (currentPage/totalPages) in the wrapper component, this should propagate to the Page Navigation component.

Any ideas on what I may be doing wrong or if this is a bug?

[charkins]

Are you sure that your currentPage <= totalPages? Are you updating currentPage before totalPages?

The pagination components (via pagination mixin) contain this:

if (this.currentPage > this.numberOfPages) {
    this.currentPage = this.numberOfPages
} else if (this.currentPage < 1) {
    this.currentPage = 1
}

If you have totalPages=1 and set currentPage=3, the component will change it back to 1. One approach that might help (depending on what else you are doing in your component) is to v-if the pagination component so that it is ignored until your component state is valid:

<b-pagination-nav v-if="totalPages>0" ... />

data() { return {
    totalPages: 0,
    ...
}}

methods: {
    handleResponse(data) {
        this.totalPages = data.totalPages;
    },
    ...
}

In its initial state totalPages=0, so pagination component is not mounted until you get your initial page count.

[gleyendeker]

Hello, I’m facing a similar issue, but it happens randomly. I’m using bootstrap-vue 2.0.0-rc.11. Sometimes, when I click at “last page” button, the url change but the item provider is not called, and the highligthed button doesn’t change, so, the table content doesn’t change of course. Clicking at page-2, page-3 buttons everthing works fine. I could’t find a behaviour pattern. I’ll be grateful if someone can help me

My paginator is:

<b-pagination-nav class="justify-content-center justify-content-sm-end m-0"
              v-model="currentPage"
              :number-of-pages="totalPages"
              :link-gen="linkGen"
              :use-route="true"
               />

the linkGen method:

linkGen (pageNum) {
      return {
        path: '/usuarios-listado?per_page=' + this.perPage + '&page=' + pageNum + '&sort_by=' + this.sortBy + '&order=' + this.order
      }
    },

the table:

<b-table
          :items="items"
          :fields="fields"
          :no-local-sorting="true"
          :hover="true"          
          :current-page="currentPage"
          class="card-table">
</b-table>

items provider:

items (ctx) {
      if (ctx.sortBy) {
        this.sortBy = ctx.sortBy
        this.sortDesc = ctx.sortDesc
      }
      return this.fetchData()
    },

fetch data:

fetchData() {

      console.log('fetching...')

      let promise = axios.get(`${this.baseUrl}${this.dataUrl}${this.query}`)

          .then((response) => {
            
            const data = response.data.data
            const meta = response.data.meta

            // Users list data array
            this.usersData          = data
            
            // Pagination
            const pagination  = meta.pagination
            this.totalItems   = pagination.total
            this.count        = pagination.count
            this.totalPages   = pagination.total_pages

            console.log('fetched!')
            return this.usersData

          }).catch(error => {
            
            // Returning an empty array, allows table to correctly handle busy state in case of error
            return []
          })
      
      return promise
    },