From fb5eb06bdd7f7a36a73a6f844006bc66c1b545e1 Mon Sep 17 00:00:00 2001
From: Mateja <mail@matejamaric.com>
Date: Sat, 24 Jul 2021 20:19:10 +0200
Subject: Fetch products inside Vuex and display them using `ProductCard`
 components.

---
 client/src/views/Home.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

(limited to 'client/src/views/Home.vue')

diff --git a/client/src/views/Home.vue b/client/src/views/Home.vue
index 3e89885..a71d2cb 100644
--- a/client/src/views/Home.vue
+++ b/client/src/views/Home.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="row mt-5">
-    <div class="col-lg-3 col-md-4 col-sm-6">
-      <ProductCard/>
+    <div v-for="product in products" :key="product._id" class="col-lg-3 col-md-4 col-sm-6">
+      <ProductCard :Id="product._id" :Name="product.name" :Price="product.price" :Img="product.imagePath"/>
     </div>
   </div>
 </template>
@@ -13,6 +13,14 @@ export default {
   name: 'Home',
   components: {
     ProductCard
+  },
+  mounted() {
+    this.$store.dispatch('pullProducts');
+  },
+  computed: {
+    products() {
+      return this.$store.getters.getProducts;
+    }
   }
 }
 </script>
-- 
cgit v1.2.3