Vue.js How to calculate totals?
<p>How can I calculate the total amount from an array?</p>

<p>I pass data to the child component as prop, and I am stuck here. When I console log prop, it returns a very complicated object . I tried <code>this.values.reduce()</code> function but it does not work.</p>

<pre><code>&lt;template&gt;
&lt;tr v-for="value in values"  &gt;
      &lt;th scope="row"&gt;{{$index+1}}&lt;/th&gt;
      &lt;td&gt;{{value.name}}&lt;/td&gt;
      &lt;td&gt;-&lt;/td&gt;
      &lt;td&gt;${{value.total}}&lt;/td&gt;
    &lt;/tr&gt;
&lt;tr&gt;
    &lt;th&gt;&lt;/th&gt;
    &lt;td&gt;&lt;strong&gt;Total:{{total}}&lt;/strong&gt;&lt;/td&gt;
    &lt;td&gt;-&lt;/td&gt;
    &lt;td&gt;-&lt;/td&gt;
    &lt;/tr&gt;
&lt;/template&gt;

&lt;script&gt;

export default {



    props: ['values'],

      ready: function() {

    }

}
&lt;/script&gt;
</code></pre>