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

Viewing 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"
Free download pdf