[Vuejs]-How to use spinner to show axios status on a specific button

by

0👍

You need to maintain a dictionary of the loading state. In addToCart function, you need to set true for particular product id. Try this code.

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;
                    });
            }

In Fetch product function made some changes.

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 changes.

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

Leave a comment