Using Vue-Router Dynamic Routes to Load Data Chapter 9
</div>
<page-not-found v-if="productNotFound"></page-not-found>
</div>`,components: {
PageNotFound
},
data() {
return {
slug: this.$route.params.slug,
productNotFound: false,
image: false,
variation: false
}
},computed: {
product() {
let product;if(Object.keys(this.$store.state.products).length) {product = this.$store.state.products[this.slug];this.image = (product.images.length)? product.images[0] : false;
this.variation = product.variationProducts[0];if(!product) {
this.productNotFound = true;
}
}return product;
}
},watch: {
variation(v) {
if(v.hasOwnProperty('image')) {
this.updateImage(v.image);
}
},'$route'(to) {
this.slug = to.params.slug;
}
},