title: I want to set local-storage and qty increment in every click when product ID already exist in cart by Vue.js
body: <p>I made a shopping cart, where a product item gets added to the cart. When I click the product, it gets stored in a cart, but not local storage. I set it local-storage. When I click a product that already exists in the cart, I want to increment its quantity, but that's not happening. It adds another row instead, which I want to prevent.</p>
  
  <p>Here is my component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-8"&gt;
              &lt;div v-for="(product, id) in products" :key="id" class="col-xl-3 col-sm-6 mb-3 float-left"&gt;
                  &lt;div class="card o-hidden h-100"&gt;
                      &lt;div class="card-body"&gt;
                      &lt;div class="card-body-icon"&gt;
                          &lt;i class="fas fa-fw fa-comments"&gt;&lt;/i&gt;
                      &lt;/div&gt;
                      &lt;div class="mr-5"&gt;{{product.name}}&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="card-footer clearfix small z-1 form-group row" href="#"&gt;
                          &lt;span class="float-left"&gt;&lt;input type="text" v-model="product.qty" class="form-control form-control-sm mb-2"&gt;&lt;/span&gt;
                          &lt;strong class="float-right col-sm-6"&gt;
                              {{product.price}} TK
                          &lt;/strong&gt;
                          &lt;button class="btn btn-sm btn-info float-right col-sm-6" @click="addToCart(product)"&gt;
                              &lt;i class="fas fa-plus"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
              &lt;table class="table table-sm"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                      &lt;th&gt;#SL&lt;/th&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Qty&lt;/th&gt;
                      &lt;th&gt;Price&lt;/th&gt;
                      &lt;th&gt;L/T&lt;/th&gt;
                      &lt;th&gt;Action&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      &lt;tr v-for="(cart, i) in carts" :key="i"&gt;
                          &lt;td&gt;{{cart.id}}&lt;/td&gt;
                          &lt;td&gt;{{cart.name}} &lt;/td&gt;
                          &lt;td class="text-right"&gt;{{cart.qty}}&lt;/td&gt;
                          &lt;td class="text-right"&gt;{{cart.price}}&lt;/td&gt;
                          &lt;td class="text-right"&gt;{{cart.price*cart.qty}}&lt;/td&gt;
                          &lt;td&gt;&lt;button type="button" @click="removeProduct(i)" class="btn btn-sm btn-danger"&gt;x&lt;/button&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
                  &lt;tfoot&gt;
                      &lt;tr&gt;
                          &lt;td colspan="4" class="text-right font-weight-bold"&gt;Total&lt;/td&gt;
                          &lt;td class="text-right"&gt; {{total}}/-&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tfoot&gt;
              &lt;/table&gt;
              &lt;div&gt;
                  &lt;button class="btn btn-sm btn-info float-right"&gt;Checkout&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data() {
          return {
              products:[],
              carts:[],
          }
      },
  
      computed:{
          total(){
              var total = 0
              this.carts.forEach(cart =&gt; {
                  total += parseFloat(cart.price * cart.qty)
              })
              return total
          },
      },
  
      mounted(){
          this.showProduct()
      },
  
      methods:{
          showProduct(){
              axios.get('api/pos')
              .then(res=&gt;{
                  this.products = res.data.data
              });
          },
  
          addToCart(product){
              this.carts.push(product)
          },
  
          removeProduct(i){
              this.carts.splice(i,1)
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the screenshot:
  <img src="https://i.stack.imgur.com/vDzX1.png" alt="this my output project screenshot. how to prevent it."></p>