I want to implement a pagination component b-pagination w/bootstrap-vue but it will only display page one. I am following the setup in documentation but they only show an example using a table not an unordered list. I have :

  <div class="results overflow-auto" v-cloak>
    <h3>Search Results</h3>

    <modal v-if="showModal" @close="showModal = false">
      you can use custom content here to overwrite
      default content
      <template v-slot:header>
        <h1>NASA Image</h1>

      <template v-slot:body>
        <b-img class="modal-image" v-bind:src="attribute"></b-img>

    <!-- ======== Pagination Markup  ============ -->

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

    <!-- ==========End Pagination Markup ======== -->

    <!-- Limit output to 100 items -->


      <li v-for="(item, index) in propsResults.items.slice(0,100)" :key="index">
        {{ item.data[0].title}}
            alt="Fluid image"

and my javascript is :

export default {
  name: "SearchResults",
  props: ["propsResults"],
  data() {
    return {
      showModal: false,
      attribute: "",
      perPage: 10,
      currentPage: 1,
      items: this.$props.propsResults.items
  computed: {
    rows() {
      return this.$props.propsResults.items.length;

The pagination component is displaying all 100 items of items array on one page. I should also note I do not see the items array in the b-pagination props object per Vue dev tools in FF. is this normal? Any insight appreciated..

1 Answers

aprouja1 On Best Solutions

You should still be using currentPage to choose which items to show. The b-pagination component only changes that number.

Try using this line:

<li v-for="(item, index) in items.slice(10*(currentPage-1),10*(currentPage))" :key="index">