Pagination with Axios

Win 10 (1803) | Chrome 69 | Bootstrap vue 2.0.0-rc.11

When using pagination with axios response to calculate total number of pages, i have to double click the pager in order to see the next page contents:

<b-pagination
  v-if="numbers.total > 24"
  size="md"
  v-model="currentPage"
  :limit="6"
  :total-rows="numbers.total"
  :per-page="24"
  @click.native="fetchNumbers()"
></b-pagination>

numbers total are comes from:

    fetchNumbers () {
      return axios.get(globalConfig.NUMBERS_URL, {
        params: {
          limit: 24,
          offset: (this.currentPage - 1) * 24
        }
      })
        .then((resp) => {
          this.numbers = resp.data
          // console.log(resp)
        })
        .catch((err) => {
          console.log(err)
        })
    },

With lodash debounce, if i set a small delay, it works as intended, i suspect async there.

[eamon-hguk]

I had a similar issue and fixed it by picking up the page via the method call from the change event, for example: <b-pagination size="md" :total-rows="rowsCount" v-model="selectedPage" :limit="5" :per-page="50" @change="pageChanged"> </b-pagination>

Then the model value is passed to the pageChanged method, and can be picked up like so:

pageChanged(page) { // Do things with the page value }

The reason the other way doesn’t always work, is that getting the model via the normal way, doesn’t seem to update in time after the change (or click) event to have the new value.

[jptrosclair]

Use @change instead of @click to fire off fetchNumbers() from user interaction after the model is updated.