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

Displaying the variations in a table

Add a table element to your variations container and loop through the items array. For

now, display the title, quantity and price. Add an additional cell that contains a

button with the value of Add to basket. We'll configure that in Chapter 11, Building an E-

commerce Store – Adding a Checkout. Don't forget to add a $ currency symbol in front of your

price, as it's currently just a "raw" number.

Watch out – when using the $ sign within the template literals, JavaScript will try and

interpret it, along with the curly brackets, as a JavaScript variable. To counteract this,

prepend the currency with a backslash – this tells JavaScript that the next character is

literal, and should not be interpreted in any other way:

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 }}</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 class="variations">

<table>