Nesting more than 2 levels of x-for/x-if leads to multiple method calls

[mtsvetanoff]

Hello. I've stumbled on an issue which is present only when you've nested more than 2 levels of x-if statements and is even worse when you use x-for. Basically instead of evaluating once, the x-for/x-if statements evaluate as many times as they are nested beyond the second level. So if we have 3 levels of nested x-if/x-for statements the most inner level will evaluate once + one more time. Not only that but these evaluations accumulate and multiply with every evaluation of the parent x-if/x-for statements.

Here's a codepen that demonstrates the issue. Make sure you open the console drawer.
https://codepen.io/tsvetanoff/pen/JjgKEoV

Whenever all four buttons are true you should see "hello" in the DOM and once in the console and this is exactly the way it works if you toggle buttons A and B. Toggling buttons C and D works correctly only if you've not toggled buttons A or B. Once you toggle A or B and then toggle C or D you get the "hello" message in the console not once, but many times. And their number keeps growing with each toggle of their parents.

I've searched through all the issues and discussions in the repo but I did not find this reported. Maybe #4299 comes close, but the supposed fix does not address this bug as it is still present.

Is there something I am missing or I could implement to circumvent the issue?

[ekwoka]

Solved in #4300

Will be included in the next release.

[mtsvetanoff]

I assumed it was already released since it was merged 3 months ago. In that case I'll mark your comment as answer whenever the next release comes out and i've confirmed it fixes the issue.