difference between Alpine 2 and 3 when comes to nested x-for under x-if?

[sqllyw]

Hi,
I was trying to upgrade to Alphine 3, encounter a issue, here is a very small demo:

https://jsfiddle.net/sqj7oLxm/

above uses Alpine 2, it has first x-for showing names, under every name another x-for shows colors, this x-for is under a x-if:

 <template x-if="!hideColor">

so in the first loading of page, it will show name and color as hideColor is false, then when you click the button to set hideColor to true, color will not be shown.

here is the exact code using alpine 3,

https://jsfiddle.net/sqj7oLxm/1/

in the first loading of page, color is not shown, after clicking to set hideColor to true, it start to work the same as Alpine 2 version, could anybody take a look at examples and point out why is not working in first loading of page?

Thanks

[KevinBatdorf]

That seems like a bug. Here's a more minimal foo/bar type test case to use.

https://codepen.io/KevinBatdorf/pen/LYWgKZb?editors=1010

I'll attempt to debug this tomorrow but the first line of the loop makes me think it will take a lot more experience :)

// Prepare yourself. There's a lot going on here.

[sqllyw]

thanks for confirming this as a bug, I have moved this to 'Bug' category

[sqllyw]

seems that you can not use a x-if before the second x-for, a workaround is:

https://codepen.io/sqllyw/pen/KKWrRjW

not a very good solution, but needed to proceed with the upgrading of project to Alpine 3

[sqllyw]

tested this in 3.1.0, and it's working:

https://codepen.io/KevinBatdorf/pen/LYWgKZb?editors=1010