Step 6: class and style binding.

assets/css/style.css

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

index.html

@@ -25,7 +25,7 @@
         <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">Out of stock</p>
+        <p v-cloak v-show="inventory <= 0" :class="{ false: inventory <= 0 }">Out of stock</p>
         <p v-if="onSale">On sale! Act fast.</p>
 
         <h2>Details</h2>
@@ -38,9 +38,9 @@
           <li v-for="variant in variants"
               v-bind:key="variant.variantId"
               @mouseover="updateImage(variant.variantImage)"
-          ><!-- @ est le raccourci de v-on: -->
-            {{ variant.variantColor }}
-          </li>
+              class="color-box"
+              :style="{ backgroundColor: variant.variantColor }"
+          /><!-- @ est le raccourci de v-on: -->
         </ul>
 
         <h2>Sizes</h2>
@@ -48,8 +48,14 @@
           <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>
+        <button v-on:click="addToCart"
+                :disabled="inventory <= 0"
+                :class="{ disabledButton: !inventory }"
+        >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

@@ -28,17 +28,13 @@ const app = new Vue({
                 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;
@@ -46,16 +42,12 @@ const app = new Vue({
                 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;