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

Create an empty array, output, within the computed function. Looping through

the selectedProducts array, find each required product and add to the output array:

products() {

let products = this.$store.state.products,

output = [];

if(Object.keys(products).length) {

for(let featured of this.selectedProducts) {

output.push(products[featured]);

}

return output;

}

}

This creates the same product list but, this time, in the correct order. Try re-ordering,
adding, and deleting items to ensure your list reacts accordingly.

Showing more information

We can now work on showing more product information in our ListProduct component.

As mentioned near the beginning of the chapter, we should display:

Image

Title

Price

Manufacturer

We're already displaying the title, and the image and manufacturer can easily be pulled out

from the product information. Don't forget to always retrieve the first image from the
images array. Open up the ListProducts.js file and update the product to display this

information – making sure you check whether the image exists before displaying it.

The manufacturer title is listed under the vendor object in the product data:

<ol :start="pagination.range.from + 1">

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

<img v-if="product.images[0]" :src="product.images[0].source"

:alt="product.title" width="120">

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

<p>Made by: {{ product.vendor.title }}</p>

</li>

</ol>