Step 5: event handling.

index.html

@@ -35,7 +35,10 @@
 
         <h2>Colors</h2>
         <ul>
-          <li v-for="variant in variants" v-bind:key="variant.variantId">
+          <li v-for="variant in variants"
+              v-bind:key="variant.variantId"
+              @mouseover="updateImage(variant.variantImage)"
+          ><!-- @ est le raccourci de v-on: -->
             {{ variant.variantColor }}
           </li>
         </ul>
@@ -44,6 +47,12 @@
         <ul>
           <li v-for="size in sizes" :key="size">{{ size }}</li>
         </ul>
+
+        <button v-on:click="addToCart" ref="add">Add to cart</button>
+        <button v-on:click="removeFromCart" ref="remove" class="disabledButton">Remove</button>
+        <div class="cart">
+          <p>Cart({{cart}})</p>
+        </div>
       </div>
     </div>
   </div>

main.js

@@ -1,6 +1,9 @@
+const DISABLED = "disabledButton";
+
 const app = new Vue({
     el: "#app",
     data: {
+        cart: 0,
         description: "Chaussettes montantes",
         details: [
           "80% cotton",
@@ -8,15 +11,55 @@ const app = new Vue({
           "Gender-neutral",
         ],
         image: "./assets/img/vmSocks-green-onWhite.jpg",
-        inventory: 90,
+        inventory: 15,
         link: "https://www.google.com/search?q=vuejs+socks",
         onSale: false,
         product: "Socks",
         sizes: [32, 34, 36, 38, 40, 42, 44, 46, 48],
         variants: [
-            { variantId: 2234, variantColor: "green" },
-            { variantId: 2235, variantColor: "blue" },
+            { variantId: 2234, variantColor: "green", variantImage: "./assets/img/vmSocks-green-onWhite.jpg", },
+            { variantId: 2235, variantColor: "blue",  variantImage: "./assets/img/vmSocks-blue-onWhite.png", },
         ]
-    }
+    },
+    methods: {
+        addToCart(mouseEvent) {
+            const target = mouseEvent.target;
+            if (this.inventory <= 0) {
+                if (this.inventory < 0) {
+                    this.inventory = 0;
+                }
+                target.classList.add(DISABLED);
+                return;
+            }
+            target.classList.remove(DISABLED);
+            this.inventory--;
+            this.cart++;
+            if (this.inventory <= 0) {
+                this.inventory = 0;
+                target.classList.add(DISABLED);
+            }
+            this.$refs.remove.classList.remove(DISABLED);
+        },
+        removeFromCart(mouseEvent) {
+            const target = mouseEvent.target;
+            if (this.cart <= 0) {
+                if (this.cart < 0) {
+                    this.cart = 0;
+                }
+                target.classList.add(DISABLED);
+            }
+            target.classList.remove(DISABLED);
+            this.inventory++;
+            this.cart--;
+            if (this.cart <= 0) {
+                this.cart = 0;
+                target.classList.add(DISABLED);
+            }
+            this.$refs.add.classList.remove(DISABLED);
+        },
+        updateImage(imageSrc) {
+            this.image = imageSrc;
+        }
+    },
 });