Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Using Vue-Router Dynamic Routes to Load Data Chapter 9

width="100">

</template>

</div>

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

<div class="meta">

<span>

Manufacturer: <strong>{{ product.vendor.title }}</strong>

</span>

<span v-if="product.type">

Category: <strong>{{ product.type }}</strong>

</span>

</div>

<div v-html="product.body"></div>

</div>

<page-not-found v-if="productNotFound"></page-not-found>

</div>`,

With our images displaying, it would be a nice addition to create a gallery. Shops often

show one big image, with a set of thumbnails underneath. Clicking each thumbnail then
replaces the main image so the user can get a better look at the bigger image. Let's recreate

that functionality. We also need to ensure we don't show the thumbnails if there is only one

image.

We do this, by setting an image variable to the first image in the images array, this is the

one that will form the big image. If there is more than one image in the array, we will show
the thumbnails. We will then create a click method that updates the image variable with the

selected image.

Create a new variable in your data object and update it with the first item from the images
array when the product has loaded. It's good practice to ensure the images key is, in fact,

an array of items before trying to assign a value:

const ProductPage = {

name: 'ProductPage',

template: `<div>

<div v-if="product">

<div class="images" v-if="product.images.length">

<template v-for="img in product.images">

<img

:src="img.source"

:alt="img.alt || product.title"

width="100">