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

Our output array will have an item for each variant, formatted like the following:

["<b>Color:</b> Alloy", "<b>Size:</b> 49 cm"]

We can now join each one together, which transforms the output from an array to a string.
The character, string, or HTML you choose to join it with is up to you. For now, use a /

with spaces on either side. Alternatively, you could use tags to create a new

table cell. Add the join() function and update the template to use v-html:

const ProductPage = {

name: 'ProductPage',

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>

<tr v-for="variation in product.variationProducts"

:key="variation.barcode">

<td v-html="variantTitle(variation)"></td>