Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
Using Vue-Router Dynamic Routes to Load Data Chapter 9

<tr v-for="variation in product.variationProducts"
:key="variation.barcode">
<td>{{ variation.quantity }}</td>
<td>\${{ variation.price }}</td>
<td><button>Add to basket</button></td>
</tr>
</table>
</div>

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

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

Although we're displaying the price and quantity, we aren't outputting the actual variant


properties of the variation (such as color). To do this, we are going to need to do some


processing on our variation with a method.


The variant object contains a child object for each variation type, with a name and a value


for each type. They are also stored with a slug-converted key within the object. See the
following screenshot for more details:

Free download pdf