title: How to sum values from a v-for in Vue.js from a computed value
body: <p>I'm trying to sum the values computed inside a v-for using vuejs, however I believe it's not working because I can not access the value from the computed value inside the v-for. </p>
  
  <p>I need to display the total value as the user in {{total}} which is the sum of <code>v-model.number="totalItem(item)"</code></p>
  
  <p>Could someone pls give me some directions? Thanks.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="app"&gt;
  
      &lt;button v-on:click="add"&gt;ADD ROW&lt;/button&gt;
  
      &lt;p&gt;$: {{ total }}&lt;/p&gt;
  
      &lt;ul&gt;
          &lt;li v-for="(item, index) in items"&gt;
              &lt;input type="text" v-model="item.name"&gt;
              &lt;input type="number" v-model.number="item.quantity" min="1"&gt;
              &lt;input type="number" v-model.number="item.price" min="0.00" max="1000000000.00" step="0.01"&gt;
              &lt;input type="number" v-model.number="totalItem(item)" readonly&gt;
              &lt;button v-on:click="remove(index)"&gt;X&lt;/button&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  
  
  
      &lt;pre&gt;{{ items | json}}&lt;/pre&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;
  &lt;script src="vuejs.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JavaScript - Vue.js</strong></p>
  
  <pre><code>new Vue({
    el: '#app',
    data: {
      items: [{name: '', quantity: '', price: ''}]
    },
    methods: {
      add: function () {
        this.items.push({
          name: '',
          quantity: '',
          price: '',
          subTotal: ''
        })
      },
      remove: function (index) {
        this.items.splice(index, 1)
      },
      totalItem: function (item) {
        return item.price * item.quantity;
      }
    },
    computed : {
      total: function() {
        let sum = 0;
        return this.items.reduce((sum, item) =&gt; sum + item.price, 0);
      }
    }
  })
  </code></pre>