[Vuejs]-When I add .push function in my code for loop breaks

by

1👍

A computed property should not have side effects. In this case you are modifying both monthlyTotal and monthlyTotalsArr. There’s no need to do that, you can just use local variables inside the function and then return the computed value.

What’s happening is that monthlyTotalArr is being registered as a dependency of this computed property. But you’re then immediately changing it, which will mark the computed property as needing recalculating. It keeps going round in a loop trying to recalculate it but every time its dependencies change and it needs to go round again.

You should be able to write it something like this:

calcTotalMonthly () {
  return this.months.map(month => {
    let monthlyTotal = 0

    for (const check of this.checks) {
      if (check.orderTime.includes(month)) {
        for (const prod of check.bill) {
          monthlyTotal += parseInt(prod.price)
        }
      }    
    }

    return monthlyTotal
  })
}

I’ve swapped the forEach calls to for/of loops. That isn’t required but I think it makes it easier to follow. The main loop I’ve swapped to use map as that seems to be what it’s really doing.

You can rename calcTotalMonthly to monthlyTotalsArr if that’s how you want to refer to that array elsewhere. The data properties monthlyTotal and monthlyTotalsArr are both removed in my version.

I haven’t attempted to address the potential performance problem from having 3 nested loops.

👤skirtle

Leave a comment