title: Multiplying values using vue js
body: <p>I have this array of objects.</p>
  
  <pre><code>[
   {
   "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"
        }
  
    ]
   }
  ]
  </code></pre>
  
  <p>These are order items in from cart.
  I want to calculate the total for each order_detail using <code>price * quantity</code>. </p>
  
  <p>I have this function in the computed property of the component.</p>
  
  <pre><code>total: function(){
    for (var i=0; i&lt; this.invoice.length; i++){
       for(var j=0; j&lt;this.invoice[i].order_details.length; j++){
          return this.invoice[i].order_details[j].price * this.invoice[i].order_details[j].quantity;
              }
        }
  }
  </code></pre>
  
  <p>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?</p>
  
  <p>UPDATE</p>
  
  <p>I need to display the data  this way:</p>
  
  <pre><code>          &lt;tr v-for="item in order.order_details"&gt;
                &lt;td&gt;{{item.quantity}}&lt;/td&gt;
                &lt;td&gt;{{item.product.price}}&lt;/td&gt;
                &lt;td&gt;{{total}}&lt;/td&gt;
            &lt;/tr&gt;
  </code></pre>
  
  <p>So I am expecting that for each order detail, the function should run and return <code>price *  quantity</code></p>
  
  <p>Sample Output:</p>
  
  <pre><code> ## Qty | Price | Total  
   ## 2     | 5         | 10    
   ## 3    | 5          | 15  
  </code></pre>