title: Vue.js How to calculate totals?
body: <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>