How to sum values from a v-for in Vue.js from a computed value

Question

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.

I need to display the total value as the user in {{total}} which is the sum of v-model.number="totalItem(item)"

Could someone pls give me some directions? Thanks.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>

<div id="app">

    <button v-on:click="add">ADD ROW</button>

    <p>$: {{ total }}</p>

    <ul>
        <li v-for="(item, index) in items">
            <input type="text" v-model="item.name">
            <input type="number" v-model.number="item.quantity" min="1">
            <input type="number" v-model.number="item.price" min="0.00" max="1000000000.00" step="0.01">
            <input type="number" v-model.number="totalItem(item)" readonly>
            <button v-on:click="remove(index)">X</button>
        </li>
    </ul>



    <pre>{{ items | json}}</pre>


</div>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="vuejs.js"></script>
</body>

</html>

JavaScript - Vue.js

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) => sum + item.price, 0);
    }
  }
})

It might be better if you added a codepen for your example code IMO. — Ducky
– Ducky, Commented Jan 25, 2021 at 22:50

gs-rp · Accepted Answer · 2018-01-11 23:58:18Z

8

I've found my answer. It's simple.

v-model.number="item.total = item.quantity * item.price"

answered Jan 11, 2018 at 23:58

gs-rp

3771 gold badge3 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mengseng Oeng · Accepted Answer · 2018-05-31 04:37:37Z

8

For

computed: {
  totalItem: function(){
      let sum = 0;
      for(let i = 0; i < this.items.length; i++){
        sum += (parseFloat(this.items[i].price) * parseFloat(this.items[i].quantity));
      }

     return sum;
   }
}

ForEach

  computed: {
    totalItem: function(){
      let sum = 0;
      this.items.forEach(function(item) {
         sum += (parseFloat(item.price) * parseFloat(item.quantity));
      });

     return sum;
   }
}

edited May 31, 2018 at 4:37

answered May 31, 2018 at 4:22

Mengseng Oeng

8232 gold badges8 silver badges20 bronze badges

Comments

frederickha · Accepted Answer · 2018-01-10 04:13:27Z

5

Do something like this in the parent component:

computed: {
  total: function(){
  return this.items.reduce(function(prev, item){
  return sum + item.price; 
  },0);
 }
}

answered Jan 10, 2018 at 4:13

frederickha

3681 silver badge8 bronze badges

Comments

Dirceu Henrique · Accepted Answer · 2021-04-24 21:05:48Z

0

Short foreach, where you can put in getters.js for vuex

totalInvoice: (state) => {
    let sum = 0
    state.itens.forEach(  (item)  =>  sum += (item.value)  )
    return sum
}

answered Apr 24, 2021 at 21:05

Dirceu Henrique

396 bronze badges

Collectives™ on Stack Overflow

How to sum values from a v-for in Vue.js from a computed value

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related