如何在 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;
}
}

如何在 v-for(VueJS) 中单独求和项目的数量

How to sum item's quantity separately in v-for(VueJS)

javascript

vue.js

v-for