分页不适用于 b-table答案

【问题标题】：Pagination doesn't work for me with b-table分页不适用于 b-table
【发布时间】：2019-11-24 17:47:18
【问题描述】：

我正在使用VueJS 构建一个应用程序，bootstrapVue 用于前端，Django 用于后端。我正在使用b-table，我想通过b-pagination 使用分页。

在我的itemsProvider 函数中，我得到b-pagination 的当前页面，就像ctx.currentPage 一样，并向后端发送请求。问题是当我点击 b-pagination 的按钮时，itemsProvider 函数没有被调用，我不知道为什么。

下面是部分代码：

<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>

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

我应该像这样将perPage 和currentPage 值绑定到b-table 的道具current-page 和per-page：

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

【讨论】：