Building an E-Commerce Store - Browsing Products Chapter 10Number of pages: This can be calculated by dividing the number of products by
the items per page
Current page number: This, combined with the others, will allow us to return
exactly which products we needFrom these numbers, we can calculate everything needed for our pagination. This includes
what products to display, whether to show next/previous links and, if desired, a
component to skip to different links.
Before we proceed, we are going to convert our products object into an array. This allows
us to use the split method on it, which will allow us to return a specific list of products. It
also means we can easily count the total number of items.
Update your products computed function to return an array instead of an object. This
is done by using the map() function – which is an ES2015 replacement for a simple for
loop. This function now returns an array containing the product objects:
products() {
let products = this.$store.state.products;
return Object.keys(products).map(key => products[key]);
},Create a new function in the computed object titled pagination. This function will return
an object with various figures about our pagination, for example, the total number of pages.
This will allow us to create a product list and update the navigation components. We need
to only return the object if our products variable has data. The function is shown in the
following code snippet:
computed: {
products() {
let products = this.$store.state.products;
return Object.keys(products).map(key => products[key]);
},pagination() {
if(this.products) {
return {
}
}
}
},