|
@@ -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: {
|