vue add total with quality from array object

Question

In vue I am getting a request for cart item and listing data as cart items.

This is json data

{"cart": [
{
  "id": 24,
  "product_id": "1",
  "customer_id": "2",
  "product": {
    "id": 1,
    "name": "Xolo Era 2 (8GB, 4G)",
    "code_name": "1",
    "hsn": "12345",
    "type": "Goods",
    "unit": "PC",
    "qty": "1",
    "mrp_price": "5000",
    "disc_amount": null,
    "discount_per": null,
    "taxable_value": null,
    "cgst": "300",
    "cgst_percentage": "6",
    "sgst": "300",
    "sgst_percentage": "6",
    "igst": null,
    "igst_percentage": "12",
    "taxable_rate": "5000",
    "cess_percentage": null,
    "total_tax": "600.00",
    "listing_price": "5600.00",
    "slug": "Xolo_Era_2_(8GB,_4G)-1522107939"
  },
  "product_primary_images": {
    "name": "1522107951.jpg",
    "cdn_url": "https:\/\/cdn.emp.tecions.xyz\/product_image\/primary\/1522107951.jpg"
  }
}],"customer": 2,"cart_count": 2}

I am using vue 2.On changing, product quantity item total is getting updated but total order value is updating

This is how i am updating product total

  this.product = CART_DETAILS_REQUEST.data.cart;

    return this.product.reduce((total, item, n) => {

      return this.total = Number(total) + Number(item.product.listing_price);
    }, 0);

this is template part of vue

<el-row v-for="(product, n) in product" :key="product.id">


                <el-col :span="6" class="order-summery-image-container">


                  <img class="order-summery-image" v-bind:src="`${product.product_primary_images.cdn_url}`" alt="">

                </el-col>

                <el-col :span="18" style="text-align: left;margin-left: 30px">

                  <p style="font-size: 22px">{{product.product.name}}</p>

                  <p>

                    Item Price:
                    <span class="listing-price"><i class="fa fa-rupee"></i> {{product.product.listing_price
                      }}</span>
                    <br>
                    Item Total:
                    <span class="listing-price"><i class="fa fa-rupee"></i> {{product.product.listing_price * qty[n]}}</span>


                  </p>


                  <p>


                    <el-input-number size="mini" v-model="qty[n]" :min="1">

                    </el-input-number>

                  </p>


                </el-col>


              </el-row>

My problem is how to update total order value on updating item quantity of each item in my cart

Note: I am using VUE 2.0 with es6 syntax and not using an external library.I dont want to use vueex

Answer 1

If you want total to update whenever product changes, make it a computed property:

new Vue({
  el: '#app',
  // ...
  data: {
    product: // ...
    qty: // ...
//  total: ... // REMOVE from data if it exists
  },
  computed: {
    total() {
        return this.product.reduce((total, item, n) => {
          return Number(total) + (Number(item.product.listing_price) * this.qty[n]);
        }, 0);
    }
  }
})

Also, as you can see in the code above, you'll want to calculate the total based on qty, I have added it to the calculation (the * this.qty[n]) part).

The presence of both this.product and this.qty in the total computed property, will make total recalculate automatically whenever any of this.product or this.qty changes.