How to count v-for object with if condition - laravel

Question

I try to count totalPaids(transaction.paid).
vue component:
<tr v-if="studentFees" v-for="(studentFee, index) in studentFees">
<td style="text-align: center;">{{ index+1 }}</td>
<td style="text-align: center;">{{ studentFee.programe }}</td>
<td style="text-align: center;">{{ studentFee.level }}</td>
<td style="text-align: center;">{{ studentFee.course_fee }}</td>
<td style="text-align: center;">{{ studentFee.student_amount }}</td>
<td style="text-align: center;">{{ studentFee.discount }}</td>
<div v-for="studentTransaction in studentTransactions">
<div v-if="studentTransaction.s_fee_id == studentFee.s_fee_id">
<td style="text-align: center;">{{ totalPaids(studentTransaction.paid) }}</td>
</div>
</div>
</tr>
or see https://i.stack.imgur.com/aGoLo.png
in vue method:
totalPaids(values){
console.log(values)
}
console.log: 3000, 5000, 2000, 1000
please help to sumation.

Answer 1

Working snippet:
new Vue({
el: '#app',
data: {
message: 'p',
sum:0
},
methods:{
totalPaids: function(values){
this.$data.sum+= Number(values);
console.log( this.$data.sum);
return this.$data.sum;
}
},
mounted(){
for(var i=0;i<5;i++)
this.message=this.totalPaids(900);
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
</div>
I would suggest you to register the variable in the data section to save it's state:
data: {
sum: 0,
},
Later modify the method totalPaids like this:
totalPaids(values){
this.sum+= Number(values);
console.log(sum);
return sum;
}
Hope this helps.

Answer 2

Assuming your values is an array of numbers then you can use the reduce method in JavaScript. So you can adjust your TotalPaid function to this:
totalPaids(values){
var sum = values.reduce((sum, currentVal) => sum + currentVal);
console.log(sum);
return sum;
}
So this just takes your array of values, then runs through them adding the current value to the sum value each time.