How to add items to each pagination number in Vuejs?

user_8435614 0
Viewed 464

Pagination Reference https://bootstrap-vue.org/docs/components/pagination

 currentPage: 1,
 perPage: 3,
 
  computed: {

paginatedItems() {
  return this.productsList.slice(
    this.currentPage * this.perPage,
    (this.currentPage + 1) * this.perPage
  );
}
    rows() {
      return this.productsList.length;
    },
  },
          <div class="overflow-auto">
        <div v-for="(item, key) in paginatedItems" :key="key"></div>

            <div
              class="product-plp1"
              v-for="product in productsList"
              :key="product"
              id="product"
              :items="productsList"
              :per-page="perPage"
              :current-page="currentPage"
            >
              <div class="prod-plpimg1"></div>
              <div class="prod-plpimage1name">
                {{ product.key }}
              </div>
              
              </div>
            </div>
          </div>
          <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>

How to add pagination for the above code. I have list of products available in the v-for, And now i want to add the bootstrap-vue pagination. and display products in each pagination number. like 1.2.3,...

Added the bootstrapvue pagination, But dont have idea how to start with that, Can you please help me with this. Thanks.

Note:- For i am able to see all list of products in one place, So need to display items in each page number.

bootstrap-vue vue.js pagination javascript
1 Answers

Unlike <b-table>, which knows to render :items as its rows, passing :items to a plain DOM element

<div :items="productsList"></div>

doesn't do anything. You end up with a <div> with :items, but it doesn't know what to do with them.

With plain DOM elements you have to iterate over the list yourself:

<div v-for="(item, key) in paginatedItems" :key="key">
   ...item specific stuff here...
</div>

In your case, it would probably look like:

<div v-for="product in paginatedItems" :key="product.key">
  ...product here...
</div>

Also, you have to define paginatedItems in computed as the current subsection of items, according to currentPage and perPage:

computed: {
  paginatedItems() {
    return this.productsList.slice(
      this.currentPage * this.perPage,
      (this.currentPage + 1) * this.perPage
    );
  }
}
user_18916770
Related