Getting bootstrap vue pagination to play with REST api
You need to set the per-page prop to 0 on the b-table component to disable the local pagination and allow b-pagination to handle the data. Here's an example:
new Vue({ el: '#app', data() { return { items: [], fields: [{ key: 'postId', label: 'Post ID' }, { key: 'id', label: 'ID' }, { key: 'name', label: 'Name' }, { key: 'email', label: 'Email' }, { key: 'body', label: 'Body' } ], currentPage: 0, perPage: 10, totalItems: 0 } }, mounted() { this.fetchData().catch(error => { console.error(error) }) }, methods: { async fetchData() { this.items = await fetch(`https://jsonplaceholder.typicode.com/comments?_page=${this.currentPage}&_limit=${this.perPage}`) .then(res => { this.totalItems = parseInt(res.headers.get('x-total-count'), 10) return res.json() }) .then(items => items) } }, watch: { currentPage: { handler: function(value) { this.fetchData().catch(error => { console.error(error) }) } } }})<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.js"></script><script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script><script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script><div id="app"> <b-table show-empty :items="items" :fields="fields" :current-page="currentPage" :per-page="0"></b-table> <b-pagination size="md" :total-rows="totalItems" v-model="currentPage" :per-page="perPage"></b-pagination></div>
You can also disabled local pagination in the table, so that your items provider becomes responsible for controlling the pagination.