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

And the updated data function becomes:

data() {

return {

perPage: 12,

currentPage: 1,

pageLinksCount: 3,

ordering: ''

}

}

To update the order of the products we now need to manipulate the product list. This
needs to be done before the list gets split for pagination - as the user would expect the

whole list to be sorted, not just the current page.

Store the product price

Before we proceed, there is an issue we need to address. To sort by price, the price needs to
ideally be available on the product itself, not calculated specifically for the template, which

it currently is. To combat this, we are going to calculate the price before the products get

added to the store. This means it will be available as a property on the product itself, rather
than being dynamically created.

The details we need to know are the cheapest price and whether the product has many
prices within its variations. The latter means we know whether we need to display the

"From:" when listing the products out. We will create two new properties for each

product: price and hasManyPrices.

Navigate to the products mutation in the store and create a new object and a loop of the

products:

products(state, payload) {

let products = {};

Object.keys(payload).forEach(key => {

let product = payload[key];

products[key] = product;

});

state.products = payload;

}