Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1

Building an E-Commerce Store - Browsing Products Chapter 10


to: pageFrom + this.perPage
}
}
}
},

pageLinks() {
if(this.products.length) {
let negativePoint = this.currentPage - this.pageLinksCount,
positivePoint = this.currentPage + this.pageLinksCount,
pages = [];

if(negativePoint < 1) {
negativePoint = 1;
}

if(positivePoint > this.pagination.totalPages) {
positivePoint = this.pagination.totalPages;
}

for (var i = negativePoint; i <= positivePoint; i++) {
pages.push(i)
}

return pages;
}
}
},

watch: {
'$route'(to) {
this.currentPage = parseInt(to.query.page);
},
perPage() {
if(this.currentPage > this.pagination.totalPages) {
this.$router.push({
query: Object.assign({}, this.$route.query, {
page: this.pagination.totalPages
})
})
}
}
},

created() {
if(this.$route.query.page) {
this.currentPage = parseInt(this.$route.query.page);
Free download pdf