Browse Source

Step 9: Communicating events.

Frederic G. MARAND 4 years ago
parent
commit
94af81468d
2 changed files with 13 additions and 13 deletions
  1. 5 1
      index.html
  2. 8 12
      main.js

+ 5 - 1
index.html

@@ -9,7 +9,11 @@
 <body>
   <div class="nav-bar"></div>
   <div id="app">
-    <product :is-premium="isPremium"></product>
+    <div class="cart">
+      <p>Cart({{cart.length}})</p>
+    </div>
+
+    <product :is-premium="isPremium" @add-to-cart="updateCart"></product>
   </div>
 
   <script src="./assets/js/vue.js"></script>

+ 8 - 12
main.js

@@ -42,9 +42,6 @@ const productTemplate = `<div class="product">
                 :disabled="!inStock"
                 :class="{ disabledButton: !inStock }"
         >Add to cart</button>
-        <div class="cart">
-          <p>Cart({{cart}})</p>
-        </div>
       </div>
     </div>
 `;
@@ -90,7 +87,6 @@ Vue.component("product", {
     data() {
         return {
             brand: "Vue Mastery",
-            cart: 0,
             description: "Chaussettes montantes",
             details: [
                 "80% cotton",
@@ -120,15 +116,8 @@ Vue.component("product", {
     },
     methods: {
         addToCart(mouseEvent) {
-            if (this.variants[this.selectedVariant].variantQuantity < 0) {
-                this.variants[this.selectedVariant].variantQuantity = 0;
-                return;
-            }
             this.variants[this.selectedVariant].variantQuantity--;
-            this.cart++;
-            if (this.variants[this.selectedVariant].variantQuantity <= 0) {
-                this.variants[this.selectedVariant].variantQuantity = 0;
-            }
+            this.$emit("add-to-cart", this.variants[this.selectedVariant].variantId);
         },
         updateImage(index) {
             this.selectedVariant = index;
@@ -139,7 +128,14 @@ Vue.component("product", {
 const app = new Vue({
     el: "#app",
     data: {
+        cart: [],
         isPremium: false,
+    },
+    methods: {
+        updateCart(id) {
+            console.log("uC", id);
+            this.cart.push(id);
+        }
     }
 });