Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Using Vue-Router Dynamic Routes to Load Data Chapter 9

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;

}

},

methods: {

updateImage(img) {

this.image = img;

}

}

};

Load the product up in your browser and try clicking on any of the thumbnails - you

should be able to update the main image. Don't forget to validate your code on a product
with one image or even zero images, to make sure the user isn't going to encounter any

errors.

Don't be afraid of whitespace and adding new lines for readability. Being

able to easily understand your code is better than the few bytes you

would have saved on file load. When deploying to production, files

should be minified, but during development white space takes

precedence.