Using Vue-Router Dynamic Routes to Load Data Chapter 9
</template>
</div>
<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>`,components: {
PageNotFound
},
data() {
return {
productNotFound: false,
image: false
}
},computed: {
product() {
let product;if(Object.keys(this.$store.state.products).length) {product = this.$store.state.products[this.$route.params.slug];
this.image = (product.images.length)? product.images[0] : false;if(!product) {
this.productNotFound = true;
}
}console.log(product);
return product;
}
}
};