Vue js quantity count in list

Question

I have a list of global products.

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

I also have sales which contain products.

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

This prints out a list of all attached products to this sale.

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

I want the above list, to display quantities, instead of repeating...like this.

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

So normally in regular javascript I might do.

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

But how would I do this in vue.js?

I've tried

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

Obviously thats not gonna work, cuz I need a quantity variable that resets on each loop around the products. How can I do this?

ittus · Accepted Answer · 2018-08-17 06:23:49Z

1

You can create custom methods for that:

 <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

  }
}

answered Aug 17, 2018 at 6:23

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alex Taylor Over a year ago

This will display each instance of the product, but it appears the desired behavior is to only display it once with the number of times it occurs.

ittus Over a year ago

I thought each product only display 1 time with its quantity, isn't it?

Alex Taylor Over a year ago

Yes, so what is ensuring each product is counted once in this code?

ittus Over a year ago

Normally product is unique in products array (by product.id). getProductQuanlity is called only 1 time for each product.

Alex Taylor Over a year ago

I see what you're saying, but the question suggests that the products in sales.items do have duplicates. This answer is iterating over products which is (presumably) unique.

|

tony19 · Accepted Answer · 2022-07-16 01:40:14Z

0

Create a computed property to use for your 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
    }
  }
})

And the HTML:

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

You can also add a setter if required.

edited Jul 16, 2022 at 1:40

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 17, 2018 at 6:34

Alex Taylor

8,9334 gold badges29 silver badges44 bronze badges

Collectives™ on Stack Overflow

Vue js quantity count in list

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related