Using Vue-Router Dynamic Routes to Load Data Chapter 9}
}
console.log(product);
return product;
}Open up the JavaScript console and inspect the object that should now be there. Familiarize
yourself with the keys and values available to you. Take note that the images key is an
array and the variations an object, containing a string and a further array.
Before we tackle the variations and images – let's output the simple stuff. What we need to
remember is that every field we output might not exist on every product – so it's best to
wrap it in conditional tags where necessary.
Output the body, type, and vendor.title from the product details. Prepend both the
vendor.title and type with a description of what they are, but make sure you only
render that text if it exists in the product details:
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>
{{ product.body }}
</div>
<page-not-found v-if="productNotFound"></page-not-found>
</div>`,Notice we've got the flexibility to prepend the type and vendor with more user-friendly
names. Once we have our categories and filtering set up, we can link both the vendor and
type to appropriate product listing.