x-if and x-for in the same template tag produces log errors

[lcamero]

Hi everyone,

I just noticed today while upgrading to V3 that there seems to be something causing log errors while attempting the following

<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'], open: false}">
    <template x-if="open" x-for="color in colors">
        <li x-text="color"></li>
    </template>
</ul>


<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

If a template tag meant to be used in an x-for has an x-if attribute referencing some other expression or maybe something like "colors.length", it causes the item in the iteration to throw an error in the console and shows as undefined

I seem to be able to nest my tag to first do an x-if and then an x-for, which removes the log errors but not sure if this is the intended behaviour.

This doesn't seem to happen in V2 and I wonder if this was intended and I didn't find anything in the docs or something similar.

Thanks in advance! 👍

[danddanddand]

Can you try using latest version of Alpine. I'm not getting error so I think this was resolved already.

[danddanddand]

Nevermind, I see no error but you have to used nested templates

[danddanddand]

        <ul x-data="{ colors: ['Red', 'Orange', 'Yellow'], open: false}">
            <template x-if="open">
                <template x-for="color in colors">
                    <li x-text="color"></li>
                </template>
            </template>
            <button @click="open=!open">Toggle</button>
        </ul>

[lcamero]

I figured it would be the case... Just to double check, I keep getting the error while doing this using 3.2.1. The only difference is that I started with open = true instead of false, that seems to show the error, or fwiw any value that resolves to true. I tried with your code snippet and got the same error IF template tags are not nested.

<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'], open: true}">
    <template x-if="open" x-for="color in colors">
      <li x-text="color"></li>
    </template>
</ul>


<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

I guess it's intended behaviour, just didn't see this happening in V2. I'll close this for now since it's not holding me back

[danddanddand]

I don’t think it’s intended use of API