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: