Reputation: 820
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.
Upvotes: 1
Views: 1091
Reputation: 90068
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
);
}
}
Upvotes: 1