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

Building an E-Commerce Store - Browsing Products Chapter 10

To begin with, create a new variable in the data object, which will note how many pages to

show either side of the selected page – a good value to start with is three:

data() {

return {

perPage: 12,

currentPage: 1,

pageLinksCount: 3

}

},

Next, create a new computed function titled pageLinks. This function will need to take the

current page and work out what page numbers are three less and three more than that.
From there, we need to check that the lower range is not less than one, and the upper is not

more than the total number of pages. Check that the products array has items before

proceeding:

pageLinks() {

if(this.products.length) {

let negativePoint = parseInt(this.currentPage) - this.pageLinksCount,

positivePoint = parseInt(this.currentPage) + this.pageLinksCount;

if(negativePoint < 1) {

negativePoint = 1;

}

if(positivePoint > this.pagination.totalPages) {

positivePoint = this.pagination.totalPages;

}

return pages;

}

}

The last step is to create an array and a for loop that loops from the lower range to the

higher range. This will create an array containing, at most, seven numbers with the page

range:

pageLinks() {

if(this.products.length) {

let negativePoint = parseInt(this.currentPage) - this.pageLinksCount,

positivePoint = parseInt(this.currentPage) + this.pageLinksCount,

pages = [];

if(negativePoint < 1) {