Building an E-Commerce Store - Browsing Products Chapter 10
Previous page
</button>
<button
@click="toPage(currentPage + 1)"
:disabled="currentPage == pagination.totalPages"
v-if="pagination.totalPages > 1"
>
Next page
</button><ol :start="pagination.range.from + 1">
<li v-for="product in paginate(products)" v-if="product">
<h3>{{ product.title }}</h3>
</li>
</ol><nav v-if="pagination.totalPages > pageLinksCount">
<ul>
<li v-for="page in pageLinks">
<button @click="toPage(page)">{{ page }}</button>
</li>
</ul>
</nav>
</div>`,props: {
products: Array
},data() {
return {
perPage: 12,
currentPage: 1,
pageLinksCount: 3
}
},computed: {
pagination() {
if(this.products) {
let totalProducts = this.products.length,
pageFrom = (this.currentPage * this.perPage) - this.perPage,
totalPages = Math.ceil(totalProducts / this.perPage);
return {
totalProducts: totalProducts,
totalPages: Math.ceil(totalProducts / this.perPage),
range: {
from: pageFrom,