Блог

Я создал корзину покупок, в которой товар добавляется в корзину. Когда я нажимаю на продукт, он сохраняется в корзине, но не в локальном хранилище. Я установил его в локальном хранилище. Когда я нажимаю на продукт, который уже существует в корзине, я хочу увеличить его количество, но этого не происходит. Вместо этого добавляется еще одна строка, которую я хочу предотвратить.

Вот мой компонент:

 <template>
    <div class="row">
        <div class="col-md-8">
            <div v-for="(product, id) in products" :key="id" class="col-xl-3 col-sm-6 mb-3 float-left">
                <div class="card o-hidden h-100">
                    <div class="card-body">
                    <div class="card-body-icon">
                        <i class="fas fa-fw fa-comments"></i>
                    </div>
                    <div class="mr-5">{{product.name}}</div>
                    </div>
                    <div class="card-footer clearfix small z-1 form-group row" href="#">
                        <span class="float-left"><input type="text" v-model="product.qty" class="form-control form-control-sm mb-2"></span>
                        <strong class="float-right col-sm-6">
                            {{product.price}} TK
                        </strong>
                        <button class="btn btn-sm btn-info float-right col-sm-6" @click="addToCart(product)">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <table class="table table-sm">
                <thead>
                    <tr>
                    <th>#SL</th>
                    <th>Name</th>
                    <th>Qty</th>
                    <th>Price</th>
                    <th>L/T</th>
                    <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(cart, i) in carts" :key="i">
                        <td>{{cart.id}}</td>
                        <td>{{cart.name}} </td>
                        <td class="text-right">{{cart.qty}}</td>
                        <td class="text-right">{{cart.price}}</td>
                        <td class="text-right">{{cart.price*cart.qty}}</td>
                        <td><button type="button" @click="removeProduct(i)" class="btn btn-sm btn-danger">x</button></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4" class="text-right font-weight-bold">Total</td>
                        <td class="text-right"> {{total}}/-</td>
                    </tr>
                </tfoot>
            </table>
            <div>
                <button class="btn btn-sm btn-info float-right">Checkout</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            products:[],
            carts:[],
        }
    },

    computed:{
        total(){
            var total = 0
            this.carts.forEach(cart => {
                total  = parseFloat(cart.price * cart.qty)
            })
            return total
        },
    },

    mounted(){
        this.showProduct()
    },

    methods:{
        showProduct(){
            axios.get('api/pos')
            .then(res=>{
                this.products = res.data.data
            });
        },

        addToCart(product){
            this.carts.push(product)
        },

        removeProduct(i){
            this.carts.splice(i,1)
        }
    }
}
</script>
  

Вот скриншот:

Проблема в том, что addToCart() просто помещает другой продукт в корзину, не проверяя, существует ли он уже.

Чтобы устранить проблему, обновите этот метод, чтобы найти товар, и увеличьте количество товара, если найдено. В противном случае поместите другой товар в корзину:

 addToCart(product) {
  if (this.carts.find(p => p.id === product.id)) {
    product.qty  
  } else {
    this.carts.push(product)
  }
}