Using Vue-Router Dynamic Routes to Load Data Chapter 9Because of this, there is a distinct possibility that the user could visit the product details
page, be it from a link that was shared or a search result, without the product list being
loaded. To prevent the app trying to display the product data without being fully
initialized, add a conditional attribute to the template to check if the product variable exists
before trying to display any of its attributes.
When loading our product data, we can then ensure the product variable is set to false,
until everything is fully loaded. Add the v-if attribute to the containing element in your
template:
const ProductPage = {
name: 'ProductPage',
template: `<div v-if="product">{{ product.title }}</div>`
};We can now start loading the correct product from the store and assign it to a variable.
Create a computed object with a product() function inside. Within that, create a blank
variable of the product, and return it afterward. This now defaults to returning false,
which means our template will not generate the
const ProductPage = {
name: 'ProductPage',
template: `<div v-if="product">{{ product.title }}</div>`,computed: {
product() {
let product;return product;
}
}
};Selecting the product is now a fairly simple procedure, thanks to our helpfully-formatted
product store and the slug variable, available to us within the Product component. The
products object in the store is formatted with the handle as the key and the product
details object as the value. With this in mind, we can select the desired product using the
square bracket format. For example:
products[handle]