WIP L10.4

components/ProductDisplay.js

@@ -1,9 +1,9 @@
-app.component('product-display', {
+app.component("product-display", {
 	props: {
 		premium: {
 			type: Boolean,
-      required: true
-    }
+			required: true,
+		},
 	},
 	template:
 		/*html*/
@@ -44,39 +44,50 @@ app.component('product-display', {
   </div>`,
 	data() {
 		return {
-        product: 'Socks',
-        brand: 'Vue Mastery',
+			product: "Socks",
+			brand: "Vue Mastery",
 			selectedVariant: 0,
-        details: ['50% cotton', '30% wool', '20% polyester'],
+			details: ["50% cotton", "30% wool", "20% polyester"],
 			variants: [
-          { id: 2234, color: 'green', image: './assets/images/socks_green.jpg', quantity: 50 },
-          { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg', quantity: 0 },
-        ]
-    }
+				{
+					id: 2234,
+					color: "green",
+					image: "./assets/images/socks_green.jpg",
+					quantity: 50,
+				},
+				{
+					id: 2235,
+					color: "blue",
+					image: "./assets/images/socks_blue.jpg",
+					quantity: 0,
+				},
+			],
+		};
 	},
 	methods: {
 		addToCart() {
-          this.cart += 1
+			this.$emit("add-to-cart", this.variants[this.selectedVariant].id);
+			this.cart += 1;
 		},
 		updateVariant(index) {
-          this.selectedVariant = index
-      }
+			this.selectedVariant = index;
+		},
 	},
 	computed: {
 		title() {
-          return this.brand + ' ' + this.product
+			return this.brand + " " + this.product;
 		},
 		image() {
-          return this.variants[this.selectedVariant].image
+			return this.variants[this.selectedVariant].image;
 		},
 		inStock() {
-          return this.variants[this.selectedVariant].quantity
+			return this.variants[this.selectedVariant].quantity;
 		},
 		shipping() {
 			if (this.premium) {
-          return 'Free'
+				return "Free";
 			}
-        return 2.99
-      }
-  }
-})
+			return 2.99;
+		},
+	},
+});

index.html

@@ -12,8 +12,11 @@
 		<div id="app">
 			<div class="nav-bar"></div>
 
-      <div class="cart">Cart({{ cart }})</div>
-      <product-display :premium="premium"></product-display>
+			<div class="cart">Cart({{ cart.length }})</div>
+			<product-display
+				:premium="premium"
+				@add-to-cart="updateCart"
+			></product-display>
 		</div>
 
 		<!-- Import App -->
@@ -24,7 +27,7 @@
 
 		<!-- Mount App -->
 		<script>
-      const mountedApp = app.mount('#app')
+			const mountedApp = app.mount("#app");
 		</script>
 	</body>
 </html>

main.js

@@ -1,9 +1,13 @@
 const app = Vue.createApp({
 	data() {
 		return {
-            cart: 0,
-            premium: true
-        }
+			cart: [],
+			premium: true,
+		};
 	},
-    methods: {}
-})
+	methods: {
+		updateCart(id) {
+			this.cart.push(id);
+		},
+	},
+});