Question

我正在学习用VueJS编写代码（真正的noob），我真的被困在这里

我有一份订单清单，我希望将每件商品的数量相加。对项目的唯一访问是通过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）中单独计算项目的数量

3 个答案: