Add All Values in Vuejs

Question

I don't know how to calculate the quantity in a loop.

 <tr v-for="product in products">
        <td>{{ product.name }}</td>
        <td>
            <span v-for="price in product.prices" v-html=" '&#8369; ' + price.price + ', '"></span>
         </td>
       <td >
           <span v-for="quantity in product.quantities">{{ Need to total quantities here. }}</span>
       </td>
  </tr>

My Data

I need to total all quantities. I highlighted the qty. TY

Use a computed property which returns product.quantities.reduce((sum, product) => sum + product.qty, 0). You could also create a filter. See vuejs.org/v2/guide/computed.html — Aluan Haddad
– Aluan Haddad, Commented May 19, 2017 at 7:07
It doesn't work. I think your .reduce will work if the data is look like this. donutData: [ { label: 'Openstaande verzoeken', value: 20 }, { label: 'Geaccepteerde verzoeken', value: 25 }, { label: 'Afgewezen verzoeken', value: 10 } ], My solution is really stupid. I'll post it here. I hope someone can refine the code. Sigh.... — Rbex
– Rbex, Commented May 19, 2017 at 8:28

Kirill Matrosov · Accepted Answer · 2017-05-19 10:16:48Z

2

There are some variants.

1st

You can add fields to your products array when you get it script

this.products = someData;
this.products.forEach((pr) => {
   pr.totalQuantities = pr.quantities.map((q)=>q.qty).reduce(function(total, q) {
                 return total + q}, 0);
})

template

<tr v-for="product in products">
        <td>{{ product.name }}</td>
        <td>
            <span v-for="price in product.prices" v-html=" '&#8369; ' + 
              price.price + ', '"></span>
         </td>
       <td >
           <span>{{product.totalQuantities}}</span>
       </td>
  </tr>

2nd

Add filter to count total script (insert into vue instance)

filters: {
    total: function (quantities) {
      return quantities.map((q)=>q.qty).reduce(function(total, q) {
                 return total + q}, 0);
    }
  }

template

<tr v-for="product in products">
        <td>{{ product.name }}</td>
        <td>
            <span v-for="price in product.prices" v-html=" '&#8369; ' + 
              price.price + ', '"></span>
         </td>
       <td >
           <span>{{product.quantities | total}}</span>
       </td>
  </tr>

3rd

script

computed: {
   quantities(){
       return products.map(function(pr){
            return pr.quantities.map((q)=>q.qty).reduce(function(total, q) {
                 return total + q}, 0);
       });
   }
}

template

<tr v-for="product, index in products">
        <td>{{ product.name }}</td>
        <td>
            <span v-for="price in product.prices" v-html=" '&#8369; ' + 
             price.price + ', '"></span>
         </td>
       <td >
           <span>{{ quantities[index] }}</span>
       </td>
  </tr>

variant for work with index

script

   quantities(){
       return (index) => {
          return this.$store.getters.products[index].quantities.map((q)=>q.qt‌y).reduce(function(t‌otal, q) { return total + q}, 0) }
       }
   }

template

{{quantities(index)}}

edited May 19, 2017 at 10:16

answered May 19, 2017 at 8:30

Kirill Matrosov

6,0404 gold badges30 silver badges39 bronze badges

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

7 Comments

Rbex Over a year ago

Thanks I'll try this one and get back on your answers

Rbex Over a year ago

There is an error TypeError: Reduce of empty array with no initial value I don't know why. The 1st and the 2nd has the same errors.

Rbex Over a year ago

I have tried your example and it's working. I'll try this with my real data and get back here. Thanks

Rbex Over a year ago

It works now... I need to put it in methods because I need to pass an index.

quantities: function(index){       return this.$store.getters.products[index].quantities.map((q)=>q.qty).reduce(function(total, q) {                  return total + q}, 0)     }

@Kirill Matrosov. Thank you so much...

Kirill Matrosov Over a year ago

@Rbex, it is bad idea to put it to method. it willl recount every instance update. U can use computed property and return function in it. Update post

|

Collectives™ on Stack Overflow

Add All Values in Vuejs

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related