I recently started using vue js and I am facing a challenge with this component. I am attempting to trigger another API call when one of the list options is clicked.
<template>
<div>
<h1 class="text-center text-4xl font-bold">Our Product</h1>
<ul class="flex items-center justify-center gap-5">
<li class="cursor-pointer text-xl" @click="handleClick(1)">Clothes</li>
<li class="cursor-pointer text-xl" @click="handleClick(5)">Shoes</li>
<li class="cursor-pointer text-xl" @click="handleClick(2)">Watches</li>
<li class="cursor-pointer text-xl" @click="handleClick(4)">Furniture</li>
</ul>
<div class="grid grid-cols-3 gap-5">
<div v-for="store in stores" :key="store.category.id">
<div class="max-w-xl h-auto">
<img :src="store.images[0]" alt="img" />
</div>
</div>
</div>
</div>
</template>
<script>
import { computed, ref, watch } from "vue";
import Clothes from "../Products/Clothes.vue";
import Shoes from "../Products/Shoes.vue";
import axios from "axios";
export default {
components: {
Clothes,
Shoes,
},
props: [],
data() {
return {
stores: [],
errors: [],
product: ref(1), //Changing value for product
};
},
methods: {
handleClick(params) {
this.product = params;
console.log(this.product);
},
},
//Triggering the API call
async created() {
await axios
.get(
`https://api.escuelajs.co/api/v1/categories/${this.product}/products`
)
.then((res) => {
this.stores = res.data;
console.log(this.stores);
})
.catch((e) => {
console.log(this.errors.push(e));
});
},