Step 7: computed properties.

assets/css/style.css

@@ -91,7 +91,3 @@
   [v-cloak] {
     display: none
   }
-
-  .false {
-    text-decoration: line-through;
-  }

index.html

@@ -20,12 +20,11 @@
         </a>
       </div>
       <div class="product-info">
-        <h1 v-cloak>{{ product }}</h1>
+        <h1 v-cloak>{{ title }}</h1>
 
         <h2>Available?</h2>
-        <p v-cloak v-show="inventory > 10">In stock</p>
-        <p v-cloak v-show="inventory <= 10 && inventory > 0">Limited stock</p>
-        <p v-cloak v-show="inventory <= 0" :class="{ false: inventory <= 0 }">Out of stock</p>
+        <p v-cloak v-show="inStock">In stock</p>
+        <p v-cloak v-show="!inStock">Out of stock</p>
         <p v-if="onSale">On sale! Act fast.</p>
 
         <h2>Details</h2>
@@ -35,9 +34,9 @@
 
         <h2>Colors</h2>
         <ul>
-          <li v-for="variant in variants"
+          <li v-for="(variant, index) in variants"
               v-bind:key="variant.variantId"
-              @mouseover="updateImage(variant.variantImage)"
+              @mouseover="updateImage(index)"
               class="color-box"
               :style="{ backgroundColor: variant.variantColor }"
           /><!-- @ est le raccourci de v-on: -->
@@ -49,13 +48,9 @@
         </ul>
 
         <button v-on:click="addToCart"
-                :disabled="inventory <= 0"
-                :class="{ disabledButton: !inventory }"
+                :disabled="!inStock"
+                :class="{ disabledButton: !inStock }"
         >Add to cart</button>
-        <button v-on:click="removeFromCart"
-                :disabled="cart <= 0"
-                :class="{ disabledButton: !cart }"
-        >Remove</button>
         <div class="cart">
           <p>Cart({{cart}})</p>
         </div>

main.js

@@ -2,55 +2,64 @@ const DISABLED = "disabledButton";
 
 const app = new Vue({
     el: "#app",
+    // Computer properties are cached until dependencies change.
+    // => cheaper than methods.
+    computed: {
+        image() {
+            const image = this.variants[this.selectedVariant].variantImage;
+            return image;
+        },
+        inStock() {
+            return this.variants[this.selectedVariant].variantQuantity > 0;
+        },
+        title() {
+            return [this.brand, this.product].join(' ');
+        }
+    },
     data: {
+        brand: "Vue Mastery",
         cart: 0,
         description: "Chaussettes montantes",
         details: [
-          "80% cotton",
-          "20% polyester",
-          "Gender-neutral",
+            "80% cotton",
+            "20% polyester",
+            "Gender-neutral",
         ],
-        image: "./assets/img/vmSocks-green-onWhite.jpg",
         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],
+        selectedVariant: 0,
+        sizes: [34, 36, 38, 40, 42, 44, 46],
         variants: [
-            { variantId: 2234, variantColor: "green", variantImage: "./assets/img/vmSocks-green-onWhite.jpg", },
-            { variantId: 2235, variantColor: "blue",  variantImage: "./assets/img/vmSocks-blue-onWhite.png", },
+            {
+                variantId: 2234,
+                variantColor: "green",
+                variantImage: "./assets/img/vmSocks-green-onWhite.jpg",
+                variantQuantity: 10,
+            },
+            {
+                variantId: 2235,
+                variantColor: "blue",
+                variantImage: "./assets/img/vmSocks-blue-onWhite.png",
+                variantQuantity: 0,
+            },
         ]
     },
     methods: {
         addToCart(mouseEvent) {
-            const target = mouseEvent.target;
-            if (this.inventory <= 0) {
-                if (this.inventory < 0) {
-                    this.inventory = 0;
-                }
+            if (this.variants[this.selectedVariant].variantQuantity < 0) {
+                this.variants[this.selectedVariant].variantQuantity = 0;
                 return;
             }
-            this.inventory--;
+            this.variants[this.selectedVariant].variantQuantity--;
             this.cart++;
-            if (this.inventory <= 0) {
-                this.inventory = 0;
-            }
-        },
-        removeFromCart(mouseEvent) {
-            const target = mouseEvent.target;
-            if (this.cart <= 0) {
-                if (this.cart < 0) {
-                    this.cart = 0;
-                }
-            }
-            this.inventory++;
-            this.cart--;
-            if (this.cart <= 0) {
-                this.cart = 0;
+            if (this.variants[this.selectedVariant].variantQuantity <= 0) {
+                this.variants[this.selectedVariant].variantQuantity = 0;
             }
         },
-        updateImage(imageSrc) {
-            this.image = imageSrc;
+        updateImage(index) {
+            this.selectedVariant = index;
         }
     },
 });