![](/img/trans.png)
[英]Using vue.js how do I make an image as a button which allows me to route another page
[英]How do i make another Api call onclick in vue js
我是 vue.js 的新手,我有这个组件,我正在尝试通过单击其中一个列表选项来拨打另一个 API 电话。
<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), //Where product is the changeable value }; }, methods: { handleClick(params) { this.product = params; console.log(this.product); }, }, //Here is 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)); }); },
当你使用选项 api 时不要使用ref
,你混合了选项 api 和组合 api( setup
函数)
将您的 api 调用移动到一个方法并从created
和handleClick
调用它
export default {
components: {
Clothes,
Shoes,
},
data() {
return {
product: 1,
stores: [],
errors: [],
};
},
methods: {
fetchProduct(productId) {
return axios.get(`https://api.escuelajs.co/api/v1/categories/${productId}/products`)
.then((res) => {
this.stores = res.data;
})
.catch((e) => {
this.errors.push(e);
console.error(e);
});
},
handleClick(productId) {
this.product = productId;
this.fetchProduct(productId);
},
},
//Here is the Api call.
async created() {
await this.fetchProduct(this.product);
},
};
您需要等待同步调用:
const app = Vue.createApp({ data() { return { product: 1, stores: [], errors: [], }; }, methods: { async fetchProduct(productId) { await axios.get(`https://api.escuelajs.co/api/v1/categories/${productId}/products`).then((res) => { this.stores = res.data; }).catch((e) => { this.errors.push(e); console.error(e); }); }, handleClick(productId) { this.product = productId; this.fetchProduct(productId); }, }, async created() { await this.fetchProduct(this.product); }, }) app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.2/axios.min.js" integrity="sha512-QTnb9BQkG4fBYIt9JGvYmxPpd6TBeKp6lsUrtiVQsrJ9sb33Bn9s0wMQO9qVBFbPX3xHRAsBHvXlcsrnJjExjg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <div id="demo"> <button @click="handleClick(3)">get productid 3</button> {{stores}} </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.