How to sum total in table vuejs?-CodePudding

There are two rows of data row,

<tr v-for="(data, index) in result_estimate.item_tabel" :key="index">
  <td>
    <pre> sub total : {{ambilaja(formatPrice(ambilPrice[index] - (ambilPrice[index] * subtotalRow[index])))}}</pre>
  </td>
<tr>
<div> total : {{this.totals}}</div>

The result of the above value is the total of each of each row, here I pass the value into the function ambilaja().

 return {
    totals : 0
    },
    computed : (){
         ambilaja: function(){
              return (value) => this.lempar(value)
         },
    }, 
    method : {
       lempar(data){
          console.log(data) 
          result console 
          30002 -> total row index 0
          2003 -> total row index 1
       }
    }

How to add up the total ? ex : 30002 2003 = this.totals

CodePudding user response：

Not sure what type of data is in ambilPrice or subtotalRow but you can just add another method and pass parameters to do calculations.

<tr v-for="(data, index) in result_estimate.item_tabel" :key="index">
  <td>
    <pre> sub total : {{ambilaja(formatPrice(ambilPrice[index] - (ambilPrice[index] * subtotalRow[index])))}}</pre>
  </td>
<tr>
<div> total : {{calTotals(ambilPrice, ambilPrice, subtotalRow)}}</div>

Vue Code:

return {
  totals : 0
  },
  method : {
    calTotals(ambilPriceArr, subtotalRow, index) {
      this.totals = this.totals   ambilPriceArr[index] - (ambilPriceArr[index] * subtotalRow[index]);
      return this.totals;
    },
}

CodePudding user response：

The best approach for this issue is to use computed property for the total as like below.

computed() {
    total: function(){
        let sum = 0;
        this.result_estimate.item_tabel.forEach(item => sum  = this.calculatePriceForIndividualRow(item));
        return sum;
    },
},

Where calculatePriceForIndividualRow is the function that will calculate sum for each row.