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

Question

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

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

我尝试在数据对象中声明一个“正在加载”，默认设置为false，所以在我的添加到购物车函数中，在调用该函数之前，加载设置为true，

在我的模板中，我使用 v-show="loading" 如果加载为真，则将 fa-spin 的可见性设置为真

//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>

问题是 1) 单击添加到购物车按钮后，微调器会显示在所有产品卡片中。 2) fa-cart 图标没有隐藏，与购物车图标并排显示 3) fa-spin 继续，即使在 api 请求成功后

Answer 1

您需要维护加载状态的字典。在 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 产品功能上做了一些改动。

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>