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

When using watch, the function passes the new item as the first parameter. Rather than

referring to the one on the component, we can use this to gather the image information.

Another enhancement we can make is to disable the Add to basket button and add a note

in the dropdown if the variation is out of stock. This information is gathered from the
variation quantity key.

Check the quantity and, if less than one, display an out of stock message in the select box
and disable the Add to basket button using the disabled HTML attribute. We can also

update the value of the button:

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"

@click="updateImage(img)">

</template>

</div>

</div>

<h1>{{ product.title }} - \${{ variation.price }}</h1>

<div class="meta">

<span>

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

</span>

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

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

</span>

<span>

Quantity: <strong>{{ variation.quantity }}</strong>

</span>

</div>

<div class="variations">

<select v-model="variation">