使用Vue JS乘以值

Question

我有这个对象数组。

[
 {
 "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"
      }

  ]
 }
]

这些是购物车中的订购商品。 我想使用price * quantity计算每个order_detail的总数。

我在组件的计算属性中具有此功能。

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;
            }
      }
}

这将为order_details中的所有项目返回相同的总数。 我想念什么？ 这是正确执行此操作的正确方法吗？

更新

我需要这样显示数据：

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

因此，我希望对于每个订单明细，该函数都应运行并返回price * quantity

样本输出：

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

Answer 1

您不应该拥有一个sum变量，在这里您将所有项目级别的总和相加，如下所示：

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
}

或者您可以使用javascript的reduce函数以更简洁的方式获取此信息，如下所示：

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)
}

已编辑

给定您的代码示例，您只需在total方法中传递该item并返回总计，如下所示：

  <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
}