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

returnorder_detail 中所有项目的总计相同。我缺少什么？这是在 vue 中执行此操作的正确方法吗？

更新

我需要这样显示数据：

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

所以我希望对于每个订单详细信息，函数应该运行和 return price * quantity

示例输出：

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

Answer 1

你不应该有一个总和变量，你可以在其中对所有项目级别的总数求和，如下所示：

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 和 return 总数，如下所示：

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

使用vue js将值相乘

Multiplying values using vue js

javascript

vuejs2

已编辑