Using Vue-Router Dynamic Routes to Load Data Chapter 9Viewing this in the browser will reveal the body outputting all HTML tags as text –
meaning we can see them on the page. If you cast your mind back to the beginning of the
book where we were discussing output types, we need to use v-html to tell Vue to render
the block as raw HTML:
template: `<div>
<div v-if="product">
<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 v-html="product.body"></div>
</div>
<page-not-found v-if="productNotFound"></page-not-found>
</div>`,Product images
The next step is to output the images for our product. If you are using the bicycles CSV file,
a good product to test with is 650c-micro-wheelset – navigate to this product as it has
four images. Don't forget to go back to your original product to check that it works with
one image.
The images value will always be an array, whether there is one image or 100, so to display
them, we will always need to do a v-for. Add a new container and loop through the
images. Add a width to each image so it doesn't take over your page.
The images array contains an object for each image. This has an alt and source key that
can be input directly into your HTML. There are some instances, however, where the alt
value is missing – if it is, insert the product title instead:
template: `<div>
<div v-if="product"><div class="images" v-if="product.images.length">
<template v-for="img in product.images">
<img
:src="img.source"
:alt="img.alt || product.title"