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

<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" v-if="product.variationProducts.length

> 1">

<option

v-for="variation in product.variationProducts"

:key="variation.barcode"

:value="variation"

v-html="variantTitle(variation) + ((!variation.quantity)? ' -

out of stock' : '')"

></option>

</select>

<button @click="addToBasket()" :disabled="!variation.quantity">

{{ (variation.quantity)? 'Add to basket' : 'Out of stock' }}

</button>

</div>

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