title: How to get total of cart items price and multiply with quantity in Vue.js
body: <p>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 <code>array_sum()</code>....
  I have a <code>cartData[]</code> in which I am getting the values from the backend using Axios and in an array, there is a value called <code>product_price</code>. i was trying to achieve this with reduce method but it return <code>NaN</code> Thanks in advance</p>
  <pre><code>&lt;table id=&quot;cart&quot; class=&quot;table table-hover table-condensed cart_table&quot;&gt;
              &lt;!-- &lt;span class=&quot;d-none&quot;&gt;{{ index }}&lt;/span&gt; --&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th style=&quot;width:50%&quot;&gt;Product&lt;/th&gt;
                      &lt;th style=&quot;width:10%&quot;&gt;Price&lt;/th&gt;
                      &lt;th style=&quot;width:8%&quot;&gt;Quantity&lt;/th&gt;
                      &lt;th style=&quot;width:8%&quot;&gt;Color-Size&lt;/th&gt;
                      &lt;th style=&quot;width:22%&quot; class=&quot;text-center&quot;&gt;Subtotal&lt;/th&gt;
                      &lt;th style=&quot;width:10%&quot;&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody v-for=&quot;(cart, index) in cartData&quot; :key=&quot;cart.id&quot;&gt;
                  &lt;tr&gt;
                      &lt;td data-th=&quot;Product&quot;&gt;
                          &lt;div class=&quot;row&quot;&gt;
                              &lt;div class=&quot;col-sm-2 hidden-xs&quot;&gt;
                                  &lt;img
                                      :src=&quot;
                                          require(`../assets/product_images/${cart.product_image}`)
                                      &quot;
                                      class=&quot;img-responsive&quot;
                                  /&gt;
                              &lt;/div&gt;
                              &lt;div class=&quot;col-lg-10&quot;&gt;
                                  &lt;span class=&quot;d-none&quot;&gt;{{ index }}&lt;/span&gt;
                                  &lt;h4 class=&quot;nomargin&quot;&gt;{{ cart.product_title }}&lt;/h4&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                      &lt;td data-th=&quot;Price&quot;&gt;${{ cart.cart_price }}&lt;/td&gt;
                      &lt;td data-th=&quot;Quantity&quot;&gt;
                          &lt;input
                              type=&quot;number&quot;
                              class=&quot;form-control text-center&quot;
                              v-bind:value=&quot;cart.qty&quot;
                          /&gt;
                      &lt;/td&gt;
                      &lt;td data-th=&quot;Color-size&quot;&gt;
                          &lt;span&gt; {{ cart.product_color }} - {{ cart.product_size }} &lt;/span&gt;
                      &lt;/td&gt;
                      &lt;td data-th=&quot;Subtotal&quot; class=&quot;text-center&quot;&gt;
                          {{ cart.cart_price * cart.qty }}
                      &lt;/td&gt;
                      &lt;td class=&quot;actions&quot; data-th=&quot;&quot;&gt;
                          &lt;button class=&quot;btn btn-info btn-sm&quot;&gt;
                              &lt;i class=&quot;fas fa-sync&quot;&gt;&lt;/i&gt;
                          &lt;/button&gt;
                          &lt;button class=&quot;btn btn-danger btn-sm&quot;&gt;
                              &lt;i class=&quot;fas fa-trash&quot;&gt;&lt;/i&gt;
                          &lt;/button&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
              &lt;tfoot&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;a href=&quot;#&quot; class=&quot;btn btn-warning&quot;
                              &gt;&lt;i class=&quot;fa fa-angle-left&quot;&gt;&lt;/i&gt; Continue Shopping&lt;/a
                          &gt;
                      &lt;/td&gt;
                      &lt;td colspan=&quot;2&quot; class=&quot;hidden-xs&quot;&gt;&lt;/td&gt;
                      &lt;td class=&quot;hidden-xs text-center&quot;&gt;
                       //here i want to get the sum
                          &lt;strong&gt;Total {{ total }}&lt;/strong&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;a href=&quot;#&quot; class=&quot;btn btn-success btn-block&quot;
                              &gt;Checkout &lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i
                          &gt;&lt;/a&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tfoot&gt;
          &lt;/table&gt;
  </code></pre>
  <blockquote>
  <p>Vue.js script</p>
  </blockquote>
  <pre><code>import axios from &quot;axios&quot;;
  export default {
      name: &quot;Cart&quot;,
      data() {
          return {
              cartData: [],
          };
      },
      created() {
          this.getCartItems();
      },
      computed: {
  total() {
        return this.cartData.reduce((acc, item) =&gt; acc + item.product_price, 0);
      }
      
      },
  
      methods: {
          getCartItems() {
              axios
                  .get(&quot;http://localhost/shopping_store/src/Api/api?action=getcartitems&quot;)
                  .then((res) =&gt; {
                      this.cartData = res.data.cart_Data;
                  })
                  .catch((err) =&gt; {
                      console.log(err);
                  });
          },
      },
  };
  </code></pre>