Using Vue-Router Dynamic Routes to Load Data Chapter 9></option>
</select><button @click="addToBasket()">Add to basket</button>
</div>The next step is to create a new variable available to use on the component. In a similar vein
to the images, this will be completed with the first item of the variationProducts array
and updated when the select box changes.
Create a new item in the data object, titled variation. Populate this variable when the
data is loaded into the product computed variable:
const ProductPage = {
name: 'ProductPage',template: `...`,components: {
PageNotFound
},
data() {
return {
productNotFound: false,
image: false,
variation: 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;
this.variation = product.variationProducts[0];if(!product) {
this.productNotFound = true;
}
}console.log(product);
return product;
}