swarnamath-vue3-tailwind/src/pages/index.vue

<template>

  <div class="container-fluid ">

    

    <h1 class="font-medium text-center leading-tight text-xl p-4 "> গয়না </h1>
    <hr class="">
    <div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
      <div v-for="(item, index) in catJewlry.slice(0,8)" class="">
        <div class="flex items-center justify-center  ">
          <img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
            class=" h-48 space-x-4 flex items-center justify-center" />
        </div>
        <h3 class="text-center text-1xl font-bold  uppercase mt-3">{{ item.name }}</h3>
        <p class="text-center">{{index}} </p>
        <p class="text-center">Price - Rs. {{ item.price }} </p>       
      </div>
    </div>
      

    <h1 class="font-medium text-center leading-tight text-xl p-4 "> প্রসাধনী </h1>
    <hr class="">
    <div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
      <div v-for="(item, index) in catCosmetics.slice(0,8)" class="">
        <div class="flex items-center justify-center  ">
          <img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
            class=" h-48 space-x-4 flex items-center justify-center" />
        </div>
        <h3 class="text-center text-1xl font-bold  uppercase mt-3">{{ item.name }}</h3>
        <p class="text-center">{{index}} </p>
        <p class="text-center">Price - Rs. {{ item.price }} </p>       
      </div>
    </div>

    <h1 class="font-medium text-center leading-tight text-xl p-4 "> সার্ভিস </h1>
    <hr class="">
    <div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
      <div v-for="(item, index) in catServices.slice(0,8)" class="">
        <div class="flex items-center justify-center  ">
          <img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
            class=" h-48 space-x-4 flex items-center justify-center" />
        </div>
        <h3 class="text-center text-1xl font-bold  uppercase mt-3">{{ item.name }}</h3>
        <p class="text-center">{{index}} </p>
        <p class="text-center">Price - Rs. {{ item.price }} </p>       
      </div>
    </div>

    <h1 class="font-medium text-center leading-tight text-xl p-4 "> সবজি </h1>
    <hr class="">
    <div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
      <div v-for="(item, index) in catVegetables.slice(0,8)" class="">
        <div class="flex items-center justify-center  ">
          <img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
            class=" h-48 space-x-4 flex items-center justify-center" />
        </div>
        <h3 class="text-center text-1xl font-bold  uppercase mt-3">{{ item.name }}</h3>
        <p class="text-center">{{index}} </p>
        <p class="text-center">Price - Rs. {{ item.price }} </p>       
      </div>
    </div>

    <h1 class="font-medium text-center leading-tight text-xl p-4 "> ফল </h1>
    <hr class="">
    <div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
      <div v-for="(item, index) in catFruits.slice(0,8)" class="">
        <div class="flex items-center justify-center  ">
          <img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
            class=" h-48 space-x-4 flex items-center justify-center" />
        </div>
        <h3 class="text-center text-1xl font-bold  uppercase mt-3">{{ item.name }}</h3>
        <p class="text-center">{{index}} </p>
        <p class="text-center">Price - Rs. {{ item.price }} </p>       
      </div>
    </div>
    <h1 class="font-medium text-center leading-tight text-xl p-4 "> মুদি </h1>
    <hr class="">
    <div class="grid grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6 m-2 ">
      <div v-for="(item, index) in catGrocery.slice(0,8)" class="">
        <div class="flex items-center justify-center  ">
          <img v-if="item.img" :src="'https://api7.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
            class=" h-48 space-x-4 flex items-center justify-center" />
        </div>
        <h3 class="text-center text-1xl font-bold  uppercase mt-3">{{ item.name }}</h3>
        <p class="text-center">{{index}} </p>
        <p class="text-center">Price - Rs. {{ item.price }} </p>       
      </div>
    </div>


  </div>




</template>
<script>
export default {
  data() {
    return {
      isLoading: true,
      smProducts: {},
      catFruits: [],
      catVegetables: {},
      catGrocery: {},
      catServices: {},
      catJewlry: {},
      catCosmetics: {},
      catCloths: {}
    }
  },
  mounted: function () {
    this.getItemByCategory()
    // console.log(this.smProducts)
    // console.log(this.$route.query.cat)
    // console.log(this.fruits)
  },
  methods: {
    getItemByCategory() {
      fetch('https://api7.siliconpin.com/items/swarnamath?offset=0&limit=90')
        // fetch('https://api7.siliconpin.com/items/ecom55')
        .then(response => response.json())
        .then(data => {
          this.smProducts = data
          // console.log(data)
          this.catFruits = data.data.filter(item => { if (item.cat == "fruits") return item });
          this.catVegetables = data.data.filter(item => { if (item.cat == "vegetables") return item });
          this.catGrocery = data.data.filter(item => { if (item.cat == "grocery") return item });
          this.catServices = data.data.filter(item => { if (item.cat == "services") return item });
          this.catJewlry = data.data.filter(item => { if (item.cat == "jewlry") return item });
          this.catCosmetics = data.data.filter(item => { if (item.cat == "cosmetics") return item });
          this.catCloths = data.data.filter(item => { if (item.cat == "cloths") return item });
          
          this.isLoading = false
        })
      
    }
  }
}
</script>