Step 8: components exercise.

main.js

@@ -1,6 +1,11 @@
-const DISABLED = "disabledButton";
+const detailsTemplate = `<div>
+  <h2>Details</h2>
+  <ul>
+    <li v-for="detail in details">{{ detail }}</li>
+  </ul>
+</div>`;
 
-const tpl = `    <div class="product">
+const productTemplate = `<div class="product">
       <div class="product-image">
         <a :href="link">
           <!-- bind the src attribute to the "image" property -->
@@ -17,11 +22,7 @@ const tpl = `    <div class="product">
         <p v-cloak v-show="inStock">In stock</p>
         <p v-cloak v-show="!inStock">Out of stock</p>
         <p>Shipping: {{ shipping }}</p>
-        <h2>Details</h2>
-        <ul>
-          <li v-for="detail in details">{{ detail }}</li>
-        </ul>
-
+        <product-details :details="details"></product-details>
         <h2>Colors</h2>
         <ul>
           <li v-for="(variant, index) in variants"
@@ -48,14 +49,24 @@ const tpl = `    <div class="product">
     </div>
 `;
 
+Vue.component("product-details", {
+    props: {
+        details: {
+            type: Array,
+            required: true,
+        },
+    },
+    template: detailsTemplate,
+});
+
 Vue.component("product", {
     props: {
-      isPremium: {
-          type: Boolean,
-          required: true,
-      }
+        isPremium: {
+            type: Boolean,
+            required: true,
+        }
     },
-    template: tpl,
+    template: productTemplate,
     // Computer properties are cached until dependencies change.
     // => cheaper than methods.
     computed: {