<template>



  <div class="container-fluid bg-white mx-auto mt-3 object-center p-0">
    <h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals - Category.vue</h1>
    <hr class="">

    <div class="grid gap-x-8 gap-y-4 grid-cols-5 mt-4 mb-4">

      <div v-for="(item, index) in itemByCategory.data" class="">
        
        <router-link :to="'/item/' + item.slug">
        <div class="flex items-center justify-center  ">
            <img :src="'https://api8.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">Qty - 2 </p>
          <p class="text-center">Price - Rs. {{ item.price }} </p>
        </router-link>

      </div>




    </div>






  </div>







</template>
<script>
export default {
  // data() {
  //   return {
  //     post: {},
  //     itemByCategory: {}
  //   }
  // },
  // mounted: function () {
  //   this.getItemByCategory()
  //   // console.log(this.$route.query.cat)
  //   // console.log(this.fruits)
  // },
  // methods: {
  //   getItemByCategory() {
  //     fetch('https://api8.siliconpin.com/items/ecom55?cat=' + this.$route.query.cat)
  //       // fetch('https://api7.siliconpin.com/items/ecom55')
  //       .then(response => response.json())
  //       .then(data => this.itemByCategory = data)
  //     console.log(this.itemByCategory)

  //   }
  // }
}
</script>