Javascript 如何使用微调器在特定按钮上显示axios状态

我使用v-for来显示api请求中的产品列表，产品卡包含三个按钮，其中一个按钮是“将项目添加到购物车”按钮，带有购物车图标

我希望这样，当用户单击“添加到购物车”按钮时，购物车图标将变为微调器图标

我尝试在数据对象中声明一个“加载”，默认设置为false，因此在我的add to cart函数中，在调用函数之前，加载设置为true

在我的模板中，我使用了一个v-show=“loading”，如果loading为true，它将fa旋转的可见性设置为true

//template

 <template>
<div class="row">
        <div v-for="product in products" v-bind:key="product_slug"
             class="col-md-auto mx-auto card text-center card-product">
            <div class="card-product__img">
                <img class="card-img" src="img/product/product1.png" alt="">
                <ul class="card-product__imgOverlay">
                    <li>
                        <button><i class="ti-search"></i></button>
                    </li>
                    <li>
                        <button @click="addToCart(product.id, product.slug, product.price)"><i
                                class="ti-shopping-cart"></i> <i v-show="loading" class="fa fa-spinner fa-spin"></i>
                        </button>
                    </li>
                    <li>
                        <button><i class="ti-heart"></i></button>
                    </li>

                </ul>
            </div>
            <div class="card-body">
                <p>Accessories</p>
                <h4 class="card-product__title"><a href="single-product.html">{{ product.slug }}</a></h4>
                <p class="card-product__price">₦ {{ product.price}}</p>
            </div>
        </div>





//script

<script>
    export default {
        data() {
            return {
                loading: false,
                products: [],
                product: {
                    "id": '',
                    "slug": '',
                    "product_image_1": '',
                    "product_image_2": '',
                    "product_image_3": '',
                    "product_image_4": '',
                    "price": '',
                    "qty": '',
                    "stock_status": '',
                    "sku": '',
                    "short_description": '',
                    "description": '',
                },
                product_slug: '',
                pagination: {},
            }
        },
        created() {

            this.fetchProduct();
        },
        methods: {
            fetchProduct(page_url) {

                //assign variable to this

                let vm = this;

                // check if page url exist, = page url else = /api/shop

                page_url = page_url || '/api/shop';

                fetch(page_url)
                    .then(res => res.json())
                    .then(res => {
                        this.products = res.data;
                        vm.makePagination(res.links, res.meta);

                    })
                    .catch(err => console.log(err));
            },

            makePagination(links, meta) {
                //Make an object made up of  meta, page details from the api response

                let pagination = {
                    current_page: meta.current_page,
                    last_page: meta.last_page,
                    next_page_url: links.next,
                    prev_page_url: links.prev,
                };

                // Set the object to the pagination value

                this.pagination = pagination;

            },
            addToCart(id, slug, price) {

                this.loading = true;
                axios.post('/api/cart', {
                    id: id,
                    name: slug,
                    price: price,
                })
                    .then(function (response) {
                        this.loading = false;
                        console.log(response.data);

                    })
                    .catch(function (err) {
                        this.loading = false;
                        this.addToCart = err;
                    });
            }
        }
    }
</script>

//模板








配件

{{{product.price}
//剧本
导出默认值{
数据（）{
返回{
加载：false，
产品：[]，
产品：{
“id”：“”，
“slug”：“，
“产品图像1”：“”，
“产品图像2”：“”，
“产品图像3”：“，
“产品图片4”：“，
“价格”：“，
“数量”：“，
“库存状态”：“”，
“sku”：“”，
“简短描述”：“”，
“说明”：“”，
},
产品编号：''，
分页：{}，
}
},
创建（）{
this.fetchProduct（）；
},
方法：{
fetchProduct（页面\ url）{
//将变量分配给此
让vm=这个；
//检查页面url是否存在，=页面url else=/api/shop
page_url=page_url | |'/api/shop'；
获取（页面url）
.then（res=>res.json（））
。然后（res=>{
本产品=资源数据；
makePagination（res.links，res.meta）；
})
.catch（err=>console.log（err））；
},
生成分页（链接、元）{
//从api响应中生成一个由元、页面细节组成的对象
让分页={
当前页面：meta.current页面，
最后一页：meta.last\u页，
下一页\u url:links.next，
上一页url:links.prev，
};
//将对象设置为分页值
this.pagination=分页；
},
addToCart（id、段塞、价格）{
这是。加载=真；
axios.post（“/api/cart”{
id:id，
姓名:slug,，
价格：价格，
})
.然后（功能（响应）{
这一点：加载=错误；
console.log（response.data）；
})
.catch（函数（err）{
这一点：加载=错误；
this.addToCart=err；
});
}
}
}

问题是 1） 单击“添加到购物车”按钮后，微调器将显示在产品的所有卡片中。 2） fa购物车图标未隐藏，与购物车图标并排显示

---

3） fa spin将继续，即使在api请求成功之后

您也需要维护加载状态的字典。在addToCart函数中，您需要为特定产品id设置true。请尝试此代码

addToCart(id, slug, price) {

                this.loading[id] = true;
                axios.post('/api/cart', {
                    id: id,
                    name: slug,
                    price: price,
                })
                    .then(function (response) {
                        this.loading[id] = false;
                        console.log(response.data);

                    })
                    .catch(function (err) {
                        this.loading[id] = false;
                        this.addToCart = err;
                    });
            }

在Fetch product函数中进行了一些更改

fetchProduct(page_url) {

                //assign variable to this

                let vm = this;

                // check if page url exist, = page url else = /api/shop

                page_url = page_url || '/api/shop';

                fetch(page_url)
                    .then(res => res.json())
                    .then(res => {
                        this.products = res.data;
                        this.products.filter(function (item) {
                                  vm.loading[item.id]=false;
                                  return item;
                         })

                        vm.makePagination(res.links, res.meta);

                    })
                    .catch(err => console.log(err));
            },

html更改

 <button @click="addToCart(product.id, product.slug, product.price)"><i
                                class="ti-shopping-cart"></i> <i v-show="loading[product.id]" class="fa fa-spinner fa-spin"></i>
                        </button>

---

I“getting TypeError:无法在boolean false上创建属性2。在此。加载[id]=truedeclare加载为数据中的dict（）加载：{}