app.component('product-display', {
props: {
premium: {
type: Boolean,
required: true
}
},
template:
/*html*/
`
{{ title }}
In Stock
Out of Stock
Shipping: {{ shipping }}
`,
data() {
return {
product: 'Socks',
brand: 'Vue Mastery',
selectedVariant: 0,
details: ['50% cotton', '30% wool', '20% polyester'],
variants: [
{ id: 2234, color: 'green', image: '/fs/vue/intro/assets/images/socks_green.jpg', quantity: 50 },
{ id: 2235, color: 'blue', image: '/fs/vue/intro/assets/images/socks_blue.jpg', quantity: 0 },
],
reviews: []
}
},
methods: {
addToCart() {
this.$emit('add-to-cart', this.variants[this.selectedVariant].id)
},
updateVariant(index) {
this.selectedVariant = index
},
addReview(review) {
this.reviews.push(review)
}
},
computed: {
title() {
return this.brand + ' ' + this.product
},
image() {
return this.variants[this.selectedVariant].image
},
inStock() {
return this.variants[this.selectedVariant].quantity
},
shipping() {
if (this.premium) {
return 'Free'
}
return 2.99
}
}
})