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=&quot...