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中所有项目的相同总和。我错过了什么？这是在vue中这样做的正确方法吗？

更新

我需要以这种方式显示数据：

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

被修改

根据您的代码示例，您只需在item方法中传递total，然后返回以下内容：

  <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乘以值

1 个答案:

被修改