x-for runs before an x-if that is wrapping it

[AdamSCMM]

Discussed in #1730

^{Originally posted by AdamSCMM July 6, 2021}
I have code where an x-if wraps an x-for to stop the x-for from running if the variables are not correct. In v2 this code worked correctly, in v3 the x-for throws an error: can't access property "length", items is undefined even though the x-if should be stopping it beforehand.

I've tried a few different ways of writing the if statement, but nothing seems to make a difference

The code looks like:

<template x-if="currentDay in days">
or
<template x-if="days[currentDay]">
    <template x-for="(_numbers, _index) in days[currentDay]" :key="_index">

You can see a working example at the codepen below. Click 5 or 7 and then null or clear. It breaks when it should not. 5 to 7 works fine

https://codepen.io/acxz/pen/mdmeJRo?editors=1010

It was already suggested to me to add a || [] at the end of the for to account for the collection being undefined, but that shouldn't be necessary. This situation should not be occurring like this

[wlhrtr]

I am having a similar issue if x-if and x-for are on the same <template> tag.

Worked fine in v2.

Hat to wrap the x-for in another <template> with the x-if on it.

<template x-if="visible">
    <template x-for="day in days">
        ...
    </template>
</template>

[androbey]

Also discovered the proposed workaround by @wlhrtr myself, but just wanted to add, that for me even wrapping a <template> tag with another <template> tag with an x-if did not help in some cases and hence breaks my entire application.

[pafael]

The same problem occurs with x-models within an x-if template.

The x-models refers to the properties of an object.
When the app is launched, the object is empty and obviously its properties are indeed undefined, but since it's within an x-if with a false condition, no error occurs.
Then I create the object and set the x-if condition to true: everything is fine, the x-model can refer to the newly created object.
Then I set the x-if condition to false before deleting the object: error, although the x-model should not be called since within a false x-if.

I made a codepen reproducing the issue (it's a rough copy of my project: just click "create a notification": the error appears on clicking the "create" button appearing at the bottom of the page)

https://codepen.io/pafael/pen/NWjYwmV?editors=1001

[edit] PS: wrapping the x-models with another x-if template to check that the object is not undefined does NOT work.

[KevinBatdorf]

You have to have a spacer between two template tags:

<template x-if>
  <div>
    <template x-for>

I do think there is a bug when you have <template x-if="" x-for=""> though as when i was messing around with something the other day I noticed it was attempting to evaluate the x-for even though the x-if was falsey.

[SimoTod]

@KevinBatdorf yeah, when on the same tag, x-for is always evaluated before x-if (https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/directives.js#L144)

[KevinBatdorf]

Should the for be moved down then?

[SimoTod]

🤷‍♂️ Caleb's call. There may be a reason for that order.

[pafael]

With a spacer it does work but it still gives an error..
https://codepen.io/pafael/pen/ZEKMzRK

[KevinBatdorf]

Probably if and for both need to be moved up the list on that SimoTod linked to.

[kylethielk]

I've also been experiencing this while converting our app from 2.x to 3.x. While slightly more complicated (and possibly another issue at play here) just wanted to link this issue as well in case anyone stumbles here from google #1917

[evgeniy-b]

Hi, is there any update on this? I currently experience an issue because x-for is evaluated before x-if which should prevent from rendering.

[ekwoka]

This is fixed in the next release.

But you shouldn't wrap an x-if around the x-for.

Just put a conditional in the x-for.