Pagination doesn't work for me with b-table

Question

I'm building an app using VueJS with bootstrapVue for frontend and Django for backend. I'm using b-table and I would like to use pagination by b-pagination.

In my itemsProvider function I get the current page of the b-pagination like this ctx.currentPage and send a request to the back-end. The problem is that when I clicked on the buttons of the b-pagination the itemsProvider function isn't recalled, and I don't know why.

Below is a portion of code:

<template>
  <div class="container">
    <b-pagination v-model="currentPage" :totalRows="totalRows" :per-page="perPage"></b-pagination>
    <p>Current page {{currentPage}}</p>
    <b-table
      current-page="currentPage"
      per-page="perPage"
      :items="itemsProvider"
      :fields="fields"
    >
    </b-table>

  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Archive",
  data() {
    return {
      perPage: 10,
      totalRows: 200,
      pageOptions: [5, 10, 22],
      currentPage: 1,
      bookInfo: {},
      fields: [...]
    };
  },
  computed: {
    books() {
      return this.$store.getters["books/books"].filter(item => {
        return item.status == "AR";
      });
    }
  },
  methods: {
    ...mapActions({
      getArchivedBooks: "books/getArchivedBooks"
    }),
    itemsProvider(ctx, callback) {
      console.log(ctx.currentPage)
      let page = ctx.currentPage;
      return this.getArchivedBooks(page).then(() => {
        const items = this.books;
        return items || [];
      });
    },
  }
};
</script>

Answer 1

I should bind the perPage and currentPage values to b-table's props current-page and per-page like this:

<b-table
      :current-page="currentPage"
      :per-page="perPage"
      :items="itemsProvider"
      :fields="fields"
    >
    </b-table>