saldo counter in vue for loop gives infinite loop error - laravel

Question

(There's a PD)
I have a page where I show account movements.
In the DB there is the date and the amount.
A separate table holds a saldo for beginning of each month.
Aditionally the table is filtrable by start and end date
The filtered entries from the bank account movements have a date and an amount and this is working fine.
I am trying now to fusion that with the account-saldo.
The start is easy: take and show startSaldo from DB
On render side I have a v-for loop going though each movement
strange is I am getting an infinite loop on an unexpected method
Rendering:
<tr v-for="movimiento in this.filteredEntries">
...
<td>{{calculateSaldo(movimiento.cobro_id,movimiento.monto)}}</td>
...
</tr>
saldo is a simple property (not a calculated one), at the moment initiated with 0 and only used within the method
and this is the method
calculateSaldo(cobro_id,monto){
//cobro_id and monto are
return 0; // <<<< without this I get the infinite loop error. But why?
if (cobro_id){
this.saldo=this.saldo+parseInt(monto);
} else {
this.saldo= this.saldo-parseInt(monto);
}
console.log(this.saldo);
// <<< a return 0 here produces also an infinite loop error
return this.saldo;
},
I have no clue where to futher look...
PD: After some more tests, apparently as soon as I reassign a value to this.saldo a re-render is initiated. How overcome that?
PPD: Apparently the re-render happens after reaching the last (by Date) filtered Entity

Answer 1

As described here when you reassign a value in state render triggered and it causes an infinite loop.
So I tried to recreate a basic version of your component and I think you can solve this on your filteredEntries computed property.
computed: {
filteredEntries() {
let lastSaldo = this.saldo;
return this.entries.map((item) => {
if (item.cobro_id) {
lastSaldo = parseInt(lastSaldo) + parseInt(item.monto);
} else {
lastSaldo = parseInt(lastSaldo) - parseInt(item.monto);
}
item.saldo = lastSaldo;
return item;
});
},
},
Complete code of my recreation of your component example:
<template>
<div>
<table>
<tr v-for="(movimiento, index) in this.filteredEntries" :key="index">
<td>{{ movimiento.saldo }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
saldo: 0,
entries: [
{
cobro_id: null,
monto: 5,
},
{
cobro_id: 2,
monto: 10,
},
{
cobro_id: null,
monto: 5,
},
{
cobro_id: 1,
monto: 25,
},
],
};
},
computed: {
filteredEntries() {
let lastSaldo = this.saldo;
return this.entries.map((item) => {
if (item.cobro_id) {
lastSaldo = parseInt(lastSaldo) + parseInt(item.monto);
} else {
lastSaldo = parseInt(lastSaldo) - parseInt(item.monto);
}
item.saldo = lastSaldo;
return item;
});
},
},
};
</script>