[Vuejs]-B-pagination not displaying correctly, showing all elements on each page

by

0👍

I tried your code and everything was good. I provided a code snippet here for you to see what is wrong on your side. Please make sure that the versions of your libraries are correct. I’m not sure which version of bootstrap-vue you are using, so let me know if you are using another version and I will try to reproduce your problem.

new Vue({
  el: '#app',
  data() {
    return {
      perPage: 2,
      currentPage: 1,
      items: [],
    }
  },
  methods: {
    get_items() {
      // This method calls your API service and change items variable with the returend response.
      this.items = [{
          name: "Book 1",
          price: 200,
        },
        {
          name: "Book 2",
          price: 100,
        },
        {
          name: "Book 3",
          price: 50,
        },
        {
          name: "Book 4",
          price: 10,
        }
      ]
    }
  },
  computed: {
    rows() {
      return this.items.length
    }
  },
  mounted() {
    this.get_items()

  }
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-container fluid="xl">
    <div class="api-list">
      <h2>API Listing</h2>

      <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>

      <p class="mt-3">Current Page: {{ currentPage }}</p>

      <b-table id="my-table" striped hover :items="items" :per-page="perPage" :current-page="currentPage" small></b-table>
    </div>
  </b-container>
</div>

Leave a comment