How to get total of cart items price and multiply with quantity in Vue.js

Question

I am working on the cart system in Vue.js and want to display the sum of product price by multiplication with product quantity. recently I am working in PHP and get this done by array_sum().... I have a cartData[] in which I am getting the values from the backend using Axios and in an array, there is a value called product_price. i was trying to achieve this with reduce method but it return NaN Thanks in advance

<table id="cart" class="table table-hover table-condensed cart_table">
            <!-- <span class="d-none">{{ index }}</span> -->
            <thead>
                <tr>
                    <th style="width:50%">Product</th>
                    <th style="width:10%">Price</th>
                    <th style="width:8%">Quantity</th>
                    <th style="width:8%">Color-Size</th>
                    <th style="width:22%" class="text-center">Subtotal</th>
                    <th style="width:10%"></th>
                </tr>
            </thead>
            <tbody v-for="(cart, index) in cartData" :key="cart.id">
                <tr>
                    <td data-th="Product">
                        <div class="row">
                            <div class="col-sm-2 hidden-xs">
                                <img
                                    :src="
                                        require(`../assets/product_images/${cart.product_image}`)
                                    "
                                    class="img-responsive"
                                />
                            </div>
                            <div class="col-lg-10">
                                <span class="d-none">{{ index }}</span>
                                <h4 class="nomargin">{{ cart.product_title }}</h4>
                            </div>
                        </div>
                    </td>
                    <td data-th="Price">${{ cart.cart_price }}</td>
                    <td data-th="Quantity">
                        <input
                            type="number"
                            class="form-control text-center"
                            v-bind:value="cart.qty"
                        />
                    </td>
                    <td data-th="Color-size">
                        <span> {{ cart.product_color }} - {{ cart.product_size }} </span>
                    </td>
                    <td data-th="Subtotal" class="text-center">
                        {{ cart.cart_price * cart.qty }}
                    </td>
                    <td class="actions" data-th="">
                        <button class="btn btn-info btn-sm">
                            <i class="fas fa-sync"></i>
                        </button>
                        <button class="btn btn-danger btn-sm">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>
                        <a href="#" class="btn btn-warning"
                            ><i class="fa fa-angle-left"></i> Continue Shopping</a
                        >
                    </td>
                    <td colspan="2" class="hidden-xs"></td>
                    <td class="hidden-xs text-center">
                     //here i want to get the sum
                        <strong>Total {{ total }}</strong>
                    </td>
                    <td>
                        <a href="#" class="btn btn-success btn-block"
                            >Checkout <i class="fa fa-angle-right"></i
                        ></a>
                    </td>
                </tr>
            </tfoot>
        </table>

Vue.js script

import axios from "axios";
export default {
    name: "Cart",
    data() {
        return {
            cartData: [],
        };
    },
    created() {
        this.getCartItems();
    },
    computed: {
total() {
      return this.cartData.reduce((acc, item) => acc + item.product_price, 0);
    }
    
    },

    methods: {
        getCartItems() {
            axios
                .get("http://localhost/shopping_store/src/Api/api?action=getcartitems")
                .then((res) => {
                    this.cartData = res.data.cart_Data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};

Answer 1

data(){
  return{
    total: 0,

    cartData: [{
      price: 5,
      qty: 5},
      {price: 5,
      qty: 5
      }],
  }
},

computed: {
 calcSum(){
  let total = 0;
  this.cartData.forEach((item, i) => {
       total += item.price * item.qty;
  });
  return total;
 }

}

Answer 2

Based on your object example here is a simple code to get the sum of product price multiplied by product quantity

var cart_Data =[{"p_id":"44","cart_id":"10","cart_price":"100","product_title":"Slim striped pocket shirt","product_image":"product-4.jpg","product_color":"Blue","product_size":"L","qty":"3"},{"p_id":"45","cart_id":"11","cart_price":"42","product_title":"Contrasting Shrit","product_image":"product-7.jpg","product_color":"White","product_size":"M","qty":"1"}]
function total(cart_Data){
  let sum=0
  cart_Data.map(x=>{
   sum = sum + (x.cart_price * x.qty)
 })
  return sum
}

console.log(total(cart_Data))