javascript - 如何在 v-for(VueJS) 中分别对项目的数量求和

Question

我正在学习用 VueJS 编码（真的是菜鸟），我真的被困在这里

我有一个订单清单，我想将每个项目的数量相加。对项目的唯一访问是通过 v-for。

<tr>

<td data-th="list">

<tr v-for="(order,key) in list" :order="order" :key="key">

<li v-for="(item,key) in order.detail" :item="item" :key="item.title">{{ item.quantity }} {{ item.title }} </li> 

</tr>
</td>
    </tr>

数据是这样组织的

"list" : {
    "Order1" : {
    "detail" : [ { "quantity" : 1,
                    "title" : "Tomato"
                  }, 
                  { "quantity" : 1,
                    "title" : "Banana"
                  } ],
                },
    "Order2" : {
    "detail" : [ { "quantity" : 1,
                    "title" : "Banana"
                  }]
                },
    "Order3" : {
    "detail" : [ { "quantity" : 1,
                    "title" : "Tomato"
                  }]
                },
          }

现在我得到这样的东西：

1 番茄
1 香蕉
1 香蕉
1 番茄

但我想得到这个：
2香蕉
2番茄

Answer 1

首先，使用 .js 扩展名的脚本标签或外部 javascript 文件。那么，在这种情况下，您很可能不需要更多帮助

是的，也许 .reduce 可以解决您的问题，正如 Adriano Resende 所说

Answer 2

尝试使用类似此函数的方法来获取每个产品的总和，然后显示：

var list = {
    "Order1" : {
    "detail" : [ { "quantity" : 1,
                    "title" : "Tomato"
                  }, 
                  { "quantity" : 1,
                    "title" : "Banana"
                  } ],
                },
    "Order2" : {
    "detail" : [ { "quantity" : 1,
                    "title" : "Banana"
                  }]
                },
    "Order3" : {
    "detail" : [ { "quantity" : 1,
                    "title" : "Tomato"
                  }]
                },
          };

function sum_products(list){
  var products = [];
    for(var order in list){
        var orderDetail = list[order].detail;
        for(var i in orderDetail){
          var item = orderDetail[i];
          if(products[item.title] != undefined){
            products[item.title] += item.quantity;
          } else {
            products[item.title] = item.quantity;
          }
        }
    }
    return products;
}
console.log(sum_products(list));

Answer 3

最后！

在 Vue 中使用过滤器，我得到了这个。

filters: {

   sumProducts: function(list) {
        var products= [];

          Object.keys(list).forEach(key => {
            var order = list[key];
            var orderDetail = order.detail;
                for(let i=0; i < orderDetail.length; i++) {
                    var item = orderDetail[i];
                      if(products[item.title] != undefined){
                        products[item.title] += item.quantity;
                      } else {
                        products[item.title] = item.quantity;
                      }
                }
          }) ;
          return products;
}
}