[Vuejs]-Calculate subtotal in vue.js

by

1👍

✅

Wrong (well, incomplete):
Wouldn’t changing {{ product.subtotal }} to {{ product.price * product.quantity }} do it?

Since he wants to actually change the data, not just the display, this is what I tried and it worked for me:

watch:{
  products:{
   handler:function(newval,oldval) {
      this.products.forEach(p => {
          p.subtotal = p.price * p.quantity;
      });
   }, deep:true
  }
}

Vue supports watching a property of an object, but afaik, it doesn’t work with an array of objects (I could be wrong!).

👤Raymond Camden

1👍

Write a method.it will give a perfect solution for this.

// replace your subtotal <td> with this below

<td>{{ productSubtotal(product.price, product.quantity) }}</td>

// under methods you should write that method to calculate subtotal

methods: {
  productSubtotal(price, quantity) {
    return price * quantity;
  }
}
👤Bhaskararao Gummidi

Leave a comment