Question

我有一份全球产品清单。

<span v-for="product in products">
   {{product.name}}
</span>

我也有包含产品的销售。

<div v-for="sale in sales">
  <span v-for="product, key in sale.items">
   {{product.name}}
  </span>
</div>

这会打印出此销售中所有附加产品的列表。

 Product #1
 Product #2
 Product #1
 Product #3
 Product #2

我希望上面的列表显示数量，而不是像这样重复。

 Product #1 x 2
 Product #2 x 2
 Product #3 x 1

所以通常在常规javascript中我可能会这样做。

 for(var i = 0 ; i<=products.length; i++){
   var qty = 0;
   for(var k =0; k<=sales.items.length; k++){
     if(sales.items[k].id==products[i].id){
       qty++;
     }
   }
   if(qty!=0){
      console.log(products[i].name+" x "+qty);
   }
 }

但是我将如何在vue.js中做到这一点？

我尝试过

<div v-for="sale in sales">
 <span v-for="product in products">
   <span v-for="prod in sales.items" v-if="product.id==prod.id">
       {{product.name}} x {{how do I get quantity here??}}
   </span>
 </span>
</div>

显然那是行不通的，因为我需要一个数量变量，该变量在产品周围的每个循环上重置。我该怎么办？

Answer 1

您可以为此创建自定义methods：

 <span v-for="product in products" :key="product.id">
     {{product.name}} x {{ getProductQuanlity(product.id) }}
 </span>


methods: {
  getProductQuanlity (productId) {
    var qty = 0;
    for(var k =0; k <= this.sales.items.length; k++){
     if(this.sales.items[k].id == productId){
       qty++;
     }
    }
    return qty

  }
}

Answer 2

创建一个computed property用于您的v-for：

var app = new Vue({
  ...
  computed: {
    // a computed getter
    productSubtotals: function () {
      var subtotals = {};
      for (var i = 0; i < this.sale.items.length; i++) {
          subtotals [arr[i]] = 1 + (subtotals[arr[i]] || 0);
      }
      return subtotals; //A list of product/count pairs may be a more appropriate data structure
    }
  }
})

和HTML：

<div v-for="sale in sales">
  <span v-for="(total, product) in productSubtotals">
    {{product.name}}: {{total}}
  </span>
</div>

如果需要，您还可以添加设置器。

清单中的Vue JS数量计数

2 个答案: