如何解决当点击特定按钮时,特定按钮的加载器应该在 vue js 中加载
有一个产品组件,当我点击调用特定产品按钮上的 API 响应时,其中有两个按钮接受和拒绝每个按钮,但问题是当我点击特定产品按钮时,所有产品按钮开始加载
<template>
<v-card class="mx-4 my-4" max-width="250px">
<v-img :src="getimageURL()" height="200px"></v-img>
<v-card-title>
{{ product.product_name }}
</v-card-title>
<v-card-subtitle>
{{ product.product_sale_price }}
</v-card-subtitle>
<v-card-actions class="d-flex justify-space-between wrap">
<v-btn
color="success"
outlined
rounded
:loading="loader && indexClicked === id"
text
@click="acceptRequest(product.id,id)"
>
Accepted
<span v-if="loader" class="custom-loader">
<v-icon light>mdi-cached</v-icon>
</span>
</v-btn>
<v-btn
color="error"
class="lower-case"
:loading="loader && indexClicked === id"
outlined
rounded
text
@click="rejectRequest(product.id)"
>
Rejected
<span v-if="loader" class="custom-loader">
<v-icon light>mdi-cached</v-icon>
</span>
</v-btn>
<v-snackbar
v-if="statusMessage"
v-model="snackbar"
:timeout="timeout"
color="red"
top
center
>
{{ statusMessage }}
</v-snackbar>
</v-card-actions>
</v-card>
</template>
解决方法
两个按钮 loading
都绑定到相同的值 :loading="loader && indexClicked === id"
=> 当条件为真时,两个按钮都将开始加载
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。