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

methods: {

updateImage(img) {

this.image = img;

},

variantTitle(variation) {

let variants = variation.variant,

output = [];

for(let a in variants) {

output.push(`${variants[a].name}: ${variants[a].value}`);

}

return output.join(' / ');

},

addToBasket() {

alert(`Added to basket: ${this.product.title} -

${this.variantTitle(this.variation)}`);

}

}

};

With our product page completed, we can move on to creating a category listing for both
the type and vendor variables. Remove any console.log() calls you have in your code,

too, to keep it clean.

Summary

This chapter has covered a lot. We loaded and stored a CSV file of products into our Vuex

store. From there, we created a product detail page that used a dynamic variable in the URL
to load a specific product. We have created a product detail view that allows the user to

look through a gallery of images and choose a variation from a drop-down list. If the
variation has an associated image, the main image updates.

In Chapter 10, Building an E-Commerce Store – Browsing Products,

we will create a category page, creating filtering and ordering functions – helping the user

to find the product they want.