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: pageFrom + this.perPage

}

}

}

}

Displaying a paginated list

With our pagination properties calculated, we are now able to manipulate our products

array using the start and end points. Rather than use a hardcoded value, or use another
computed function, we are going to use a method to truncate the product list. This has the

advantage of being able to pass on any list of products while also meaning Vue does not

cache the result.

Create a new method object inside your component with a new method of paginate. This

should accept a parameter that will be the array of products for us to slice. Within the

function, we can use the two variables we calculated previously to return the right number
of products:

methods: {

paginate(list) {

return list.slice(

this.pagination.range.from,

this.pagination.range.to

);

}

}

Update the template to use this method when looping through the products:

template: `<div v-if="products">

<ol>

<li v-for="product in paginate(products)" v-if="product">

<h3>{{ product.title }}</h3>

</li>

</ol>

</div>`,

We can now view this in our browser and note it returns the first 12 products from our
object. Updating the currentPage variable within the data object to two or three will

reveal different lists of products, depending on the number.