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

Next, update your existing images loop in your template to only display when there is

more than one image in the array. Also, add the first image as the main image in your
template – not forgetting to check whether it exists first:

template: `<div>

<div v-if="product">

<div class="images" v-if="image">

<div class="main">

<img

:src="image.source"

:alt="image.alt || product.title">

</div>

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

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

<img

:src="img.source"

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

width="100">

</template>

</div>

</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>`,

The last step is to add a click handler to each of the thumbnail images, to update the image
variable when interacted with. As the images will not natively have the cursor: pointer

CSS attribute, it might be worth considering adding this.