Basic product detail without duplicating modals for each card.

1 files changed, 7 insertions, 17 deletions

diff --git a/iridescence/src/components/ProductCard.vue b/iridescence/src/components/ProductCard.vue
index 67fbfbd..f796f92 100644
--- a/iridescence/src/components/ProductCard.vue
+++ b/iridescence/src/components/ProductCard.vue
@@ -3,7 +3,7 @@
     <div class="card">
       <div class="card-image">
         <figure class="image is-square">
-          <a href="#">
+          <a @click="setDetailId">
             <img :src="thumbnail" :alt="name" title="Click to expand." />
           </a>
         </figure>
@@ -11,7 +11,7 @@
       <div class="card-content">
         <div class="content">
           <p class="title is-4">
-            <a href="#">
+            <a @click="setDetailId">
               {{ name }}
             </a>
           </p>
@@ -26,27 +26,12 @@
         </div>
       </div>
     </div>
-    <ProductDetail
-      v-if="id == 6"
-      v-bind="{
-        id: id,
-        name: name,
-        quantity: quantity,
-        cents: cents,
-        photo_base: photo_base,
-        photo_fullsize: photo_fullsize,
-        description: description
-      }"
-    ></ProductDetail>
   </div>
 </template>
 
 <script>
-import ProductDetail from "@/components/ProductDetail.vue";
-
 export default {
   name: "ProductCard",
-  components: { ProductDetail },
   props: {
     id: Number,
     name: String,
@@ -79,6 +64,11 @@ export default {
         return description.splice(0, 10).join(" ") + "…";
       }
     }
+  },
+  methods: {
+    setDetailId() {
+      this.$store.commit("productDetailId", this.id);
+    }
   }
 };
 </script>