当Vue.js已经在购物车中存在产品ID时，我想在每次点击时设置本地存储和数量增量

Question

我制作了一个购物车，产品项目被添加到购物车中。当我点击产品时，它会存储在购物车中，但不会存储在本地存储中。我把它设置为本地存储。当我点击购物车中已存在的产品时，我想增加其数量，但这没有发生。它会添加另一行，我想阻止它。

这是我的组件：

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

这是截图：

Answer 1

问题是addToCart()只是将另一个产品推入购物车而不检查它是否已经存在。

要解决此问题，请更新该方法以查找该项目，并在找到项目时增加该项目的数量。否则，将另一个项目推入购物车：

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