home-page

pages/home-page/index.vue

@@ -11,7 +11,7 @@
       </div>
       <v-row>
         <v-col
-          v-for="(item, i) in items"
+          v-for="(item, i) in categories"
           :key="i"
           cols="12"
           md="3"
@@ -21,24 +21,26 @@
             :elevation="hover ? 12 : 2"
             :class="{ 'on-hover': hover }"
           >
-            <v-card
-              :elevation="hover ? 16 : 2"
-              :class="{ 'on-hover': hover }"
-              class="mx-auto pa-2 ma-3 no-padding"
-              max-width="280"
-              link
-            >
-              <div>
-                <v-img
-                  :src="item.images"
-                  height="250px"
-                  cover
-                />
-              </div>
-              <v-card-title class="d-flex justify-center card-category-title">
-                {{ item.name }}
-              </v-card-title>
-            </v-card>
+            <nuxt-link :to="`/home-page/categories/${item.id}`">
+              <v-card
+                :elevation="hover ? 16 : 2"
+                :class="{ 'on-hover': hover }"
+                class="mx-auto pa-2 ma-3 no-padding"
+                max-width="280"
+                link
+              >
+                <div>
+                  <v-img
+                    :src="item.image"
+                    height="250px"
+                    cover
+                  />
+                </div>
+                <v-card-title class="d-flex justify-center card-category-title">
+                  {{ item.name }}
+                </v-card-title>
+              </v-card>
+            </nuxt-link>
           </v-hover>
         </v-col>
       </v-row>
@@ -353,7 +355,47 @@ export default {
           title: '20% Off Coupon for CyberWeek',
           content: 'Lorem ipsum dolor sit amet,onadipiscing elit, sedsddoeiu smod tempo...'
         }
-      ]
+      ],
+      categories: [],
+      product: []
+    }
+  },
+  mounted () {
+    this.getCategories()
+    this.getNewProducts()
+  },
+  methods: {
+    getCategories () {
+      this.$axios
+        .get('/guest/categories/main-categories/', {
+          headers: {
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal(
+              'token'
+            )}`
+          }
+        })
+        .then((response) => {
+          this.categories = response.data.data
+        })
+        .catch(function (error) {
+          console.log(error)
+        })
+    },
+    getNewProducts () {
+      this.$axios
+        .get('/guest/products/new-release/', {
+          headers: {
+            Authorization: `Bearer ${this.$auth.$storage.getUniversal(
+              'token'
+            )}`
+          }
+        })
+        .then((response) => {
+          this.product = response.data.data
+        })
+        .catch(function (error) {
+          console.log(error)
+        })
     }
   }
 }