Step 4: list rendering.

index.html

@@ -21,10 +21,29 @@
       </div>
       <div class="product-info">
         <h1 v-cloak>{{ product }}</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">Out of stock</p>
         <p v-if="onSale">On sale! Act fast.</p>
+
+        <h2>Details</h2>
+        <ul>
+          <li v-for="detail in details">{{ detail }}</li>
+        </ul>
+
+        <h2>Colors</h2>
+        <ul>
+          <li v-for="variant in variants" v-bind:key="variant.variantId">
+            {{ variant.variantColor }}
+          </li>
+        </ul>
+
+        <h2>Sizes</h2>
+        <ul>
+          <li v-for="size in sizes" :key="size">{{ size }}</li>
+        </ul>
       </div>
     </div>
   </div>

main.js

@@ -2,11 +2,21 @@ const app = new Vue({
     el: "#app",
     data: {
         description: "Chaussettes montantes",
+        details: [
+          "80% cotton",
+          "20% polyester",
+          "Gender-neutral",
+        ],
         image: "./assets/img/vmSocks-green-onWhite.jpg",
         inventory: 90,
         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" },
+        ]
     }
 });