Multiplying values using vue js

Question

I have this array of objects.

[
 {
 "id":181,
 "user_id":"3",
 "order_details":    
    [
      {"id":164,
       "order_id":"181",
       "quantity":"1",
       "price":"5.00"
      }, 
      {"id":163,
       "order_id":"181",
       "quantity":"6",
       "price":"10.00"
      }

  ]
 }
]

These are order items in from cart. I want to calculate the total for each order_detail using price * quantity.

I have this function in the computed property of the component.

total: function(){
  for (var i=0; i< this.invoice.length; i++){
     for(var j=0; j<this.invoice[i].order_details.length; j++){
        return this.invoice[i].order_details[j].price * this.invoice[i].order_details[j].quantity;
            }
      }
}

This returns the same total for all the items in the order_details. What are my missing? Is this the right way to do this in vue?

UPDATE

I need to display the data this way:

          <tr v-for="item in order.order_details">
              <td>{{item.quantity}}</td>
              <td>{{item.product.price}}</td>
              <td>{{total}}</td>
          </tr>

So I am expecting that for each order detail, the function should run and return price * quantity

Sample Output:

 ## Qty | Price | Total  
 ## 2     | 5         | 10    
 ## 3    | 5          | 15

Saurabh · Accepted Answer · 2017-01-10 10:44:24Z

3

Shouldn't you be having a sum variable, where you sum all item level total, like following:

total: function(){
  var sum = 0
  for (var i=0; i< this.invoice.length; i++){
     for(var j=0; j<this.invoice[i].order_details.length; j++){
        sum += this.invoice[i].order_details[j].price * this.invoice[i].order_details[j].quantity;
            }
      }
   return sum
}

or you can use reduce function of javascript to get this in more concise way as following:

total: function(){
  return this.invoice.reduce(function(prevVal, inv){
     return prevVal + inv.order_details.reduce(function(sum, od){
         return sum + od.price * od.quantity
     }, 0)
  }, 0)
}

Edited

Given your code sample, you can just pass the item in the total method and return the total like following:

  <tr v-for="item in order.order_details">
      <td>{{item.quantity}}</td>
      <td>{{item.product.price}}</td>
      <td>{{total(item)}}</td>  // or just {{item.quantity * item.product.price}} if it is that simple
  </tr>

JS

total: function(item){
   return item.price * item.quantity
}

edited Jan 10, 2017 at 10:44

answered Jan 10, 2017 at 6:07

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

4 Comments

Bernard 'Beta Berlin' Parah Over a year ago

I tried both examples and still get the same results....total for first item in array is shown for all list items.

Saurabh Over a year ago

Are you expecting an array in the output, can you provide sample output as well.

Bernard 'Beta Berlin' Parah Over a year ago

I have updated the question with how I want to display the data

Bernard 'Beta Berlin' Parah Over a year ago

I both methods and they all worked perfectly! You have been super-helpful answering my vue questions. Thanks alot.

Collectives™ on Stack Overflow

Multiplying values using vue js

1 Answer 1

Edited

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edited

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related