77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
<template>
|
|
|
|
|
|
<div class="container-fluid bg-white mx-auto mt-3 p-0">
|
|
<h1 class="font-medium text-center leading-tight text-4xl p-4 text-black-600">New Arrivals</h1>
|
|
<hr class="">
|
|
|
|
<div class="container mx-auto mt-3 p-0">
|
|
|
|
|
|
<div v-for="(item, index) in itemByCategory.data" class="">
|
|
|
|
|
|
<div class="flex flex-row gap-6 pt-4 pb-4">
|
|
<div class="w-auto border-blue-500 mt-6 mb-6">
|
|
<img :src="'https://api8.siliconpin.com/assets/'+item.img" alt="{{item.name}}"
|
|
class=" max-h-56 space-x-4 flex items-center justify-center" />
|
|
</div>
|
|
|
|
<div class="w-96">
|
|
<h3 class="text-1xl font-bold uppercase mt-3 mb-3">{{ item.name }}</h3>
|
|
<p class="">Description </p>
|
|
|
|
<p class="mt-2 mb-2 font-bold">{{item.description}}</p>
|
|
<p class="mt-2 mb-2">Qty - 2 /-</p>
|
|
<p class="mt-2 mb-2">Price - Rs. {{ item.price }} /-</p>
|
|
<button
|
|
class="bg-transparent mt-4 hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
|
|
Add To Cart
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</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)
|
|
// console.log(this.$route.query.id);
|
|
// console.log(this.$route.params.id);
|
|
|
|
},
|
|
methods: {
|
|
getItemByCategory() {
|
|
fetch('https://api8.siliconpin.com/items/ecom55?filter[slug][_eq]=' + this.$route.params.id)
|
|
// fetch('https://api7.siliconpin.com/items/ecom55')
|
|
.then(response => response.json())
|
|
.then(data => this.itemByCategory = data)
|
|
console.log(this.itemByCategory)
|
|
|
|
}
|
|
}
|
|
}
|
|
</script> |