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

<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>

</div>

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

</div>`,

If using the bicycles.csv dataset, the Keirin Pro Track Frameset product

(/#/product/keirin-pro-track-frame) contains several variations, some without

stock. This allows you to test the out of stock functionality along with the image

changing.

Another thing we can do to the product page is only show the dropdown when there is
more than one variation. An example of a product with only one is the 15 mm Combo

Wrench (#/product/15mm-combo-wrench). In this instance, it is not worth showing the

<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>