init

pages/tst3.vue

@@ -0,0 +1,99 @@
+<template>
+ <!-- *****************komli shaker chobi nei tai akta consule prolem show hocce -->
+  <v-container>
+    <v-layout row wrap>
+      <v-row>
+        <v-col v-for="Service in catServices" :key="catServices.id" sm="6" md="6" lg="2">
+          <nuxt-link :to="`/${Service.slug}`">
+            <v-card class="mx-auto mb-1">
+              <v-img :src="`https://api7.siliconpin.com/assets/${Service.img}`" aspect-ratio="1.2"></v-img>
+
+              <v-card-text>
+                <h3> {{Service.name}}</h3>
+              </v-card-text>
+              <v-rating half-increments dense size="20" v-model="Service.rating" background-color="orange lighten-3"
+                color="orange"></v-rating>
+              <p style="font-size:16px;padding:0 5px 10px 5px;"> {{Service.description}} <br>
+                <span style="font-weight:bold"> মূল্য {{Service.price}} টাকা ।</span>
+                <span v-if="Service.p2" style="font-weight:bold"> মূল্য {{Service.p2}} টাকা ।</span>
+              </p>
+
+            </v-card>
+          </nuxt-link>
+        </v-col>
+
+        <v-col v-for="Service in catServices" :key="catServices.id" sm="6" md="6" lg="2">
+          <nuxt-link :to="`/${Service.slug}`">
+            <v-card class="mx-auto mb-1">
+              <v-img :src="`https://api7.siliconpin.com/assets/${Service.img}`" aspect-ratio="1.2"></v-img>
+
+              <v-card-text>
+                <h3> {{Service.name}}</h3>
+              </v-card-text>
+              <v-rating half-increments dense size="20" v-model="Service.rating" background-color="orange lighten-3"
+                color="orange"></v-rating>
+              <p style="font-size:16px;padding:0 5px 10px 5px;"> {{Service.description}} <br>
+                <span style="font-weight:bold"> মূল্য {{Service.price}} টাকা ।</span>
+                <span v-if="Service.p2" style="font-weight:bold"> মূল্য {{Service.p2}} টাকা ।</span>
+              </p>
+
+            </v-card>
+          </nuxt-link>
+        </v-col>
+
+      </v-row>
+    </v-layout>
+    <!-- <div>
+  <p v-if="$fetchState.pending">Fetching mountains...</p>
+  <p v-else-if="$fetchState.error">An error occurred :(</p>
+  <div v-else>
+    <h1>Nuxt Mountains {{mountains}} </h1>
+    <ul>
+      <li v-for="mountain of mountains">{{ mountain.title }}</li>
+    </ul>
+    <button @click="$fetch">Refresh</button>
+  </div>
+</div> -->
+  </v-container>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        smProducts: [],
+        catFruits: [],
+        catVegetables: [],
+        catGrocery: [],
+        catServices: [],
+        catJewlry: [],
+        catCosmetics: [],
+        catCloths: []
+      }
+    },
+    async fetch() {
+      this.smProducts = await fetch(
+        'https://api7.siliconpin.com/items/swarnamath?offset=0&limit=90'
+      ).then(res => res.json())
+
+      this.catFruits = this.smProducts.data.filter(item => { if (item.cat == "fruits") return item });
+      this.catVegetables = this.smProducts.data.filter(item => { if (item.cat == "vegetables") return item });
+      this.catGrocery = this.smProducts.data.filter(item => { if (item.cat == "grocery") return item });
+      this.catServices = this.smProducts.data.filter(item => { if (item.cat == "services") return item });
+      this.catJewlry = this.smProducts.data.filter(item => { if (item.cat == "jewlry") return item });
+      this.catCosmetics = this.smProducts.data.filter(item => { if (item.cat == "cosmetics") return item });
+      this.catCloths = this.smProducts.data.filter(item => { if (item.cat == "cloths") return item });
+      // console.log(this.catFruits)
+    }
+  }
+</script>
+<style scoped>
+  a {
+    text-decoration: none;
+  }
+
+  #flas {
+    height: 100px;
+    width: 100%;
+  }
+</style>