Currently, I am working on a small product page following the guidelines from this Vue.js tutorial. The page consists of a product component which includes an "add to cart" button. However, the actual cart is located outside the component in index.html, so the cart property is stored within the root vue app (identified by the id 'app').
Issue: I need assistance with getting the "add to cart" button to update the cart quantity. I'm having trouble implementing this functionality using the methods addToCart and updateCart as demonstrated in the tutorial.
If anyone can provide guidance on resolving this matter, your help would be greatly appreciated! Thank you in advance!
Vue.component('product', {
props: {
premium: { // definition removed for brevity
},
template: `
/* Continued component code */
`,
data() {
// Data object content removed for brevity
variants: [ // Variant data details removed for brevity
{
variantId: 2234,
variantQuantity: 15,
variantColor: "green",
variantImage: "./assets/vmSocks-green.jpg"
},
{
variantId: 2235,
variantQuantity: 0,
variantColor: "blue",
variantImage: "./assets/vmSocks-blue.jpg"
}
]
}
},
methods: {
// Methods implementation omitted for brevity
},
computed: {
// Computed properties definition omitted for brevity
}
})
var app = new Vue({
el: '#app',
data: {
premium: true,
cart: 0
},
methods: {
updateCart() {
this.cart += 1
}
}
})
/* CSS styles omitted for brevity */
<!DOCTYPE html>
<html>
<head>
<meta name="viewpoint" content="width=devide-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Vue app</title>
</head>
<body>
<div class="nav-bar"></div>
<div id="app">
<div class="cart">
<p>Cart({{ cart }})</p>
</div>
<product :premium="premium" @add-to-cart="updateCart"></product>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="prior.js"></script>
</body>
</html>