x-if inside of x-for does not work

[markfirmware]

https://codepen.io/markfirmware/pen/vYXNBNX

only the first list item is included

[HugoDF]

How about putting it on the same template as the x-for?

Alternatively I think you can do

<template x-for=...>
  <div><template x-if=...></template></div>
</template>

[markfirmware]

Putting the x-if true after the x-for in the same template produces all list items.

Changing true to x < 3 produces blank screen

[markfirmware]

How about putting it on the same template as the x-for?

Alternatively I think you can do

<template x-for=...>
  <div><template x-if=...></template></div>
</template>

Ok, I didn't expect div around li would work but it does!

I knew about needing one element within x-for -- this means that a template does not count as an element even though it has the same syntax (angle brackets.)

[KevinBatdorf]

I would try filtering the list and looping that instead: <template x-for="x in listFiltered">

[markfirmware]

Thanks. Not trying to solve a problem but detect and repair alpinejs defects.

[scriptmaster]

hmmm, <template x-for="x in list.filter(x => x.prop==check)">✅ worked for me.

When specifying both x-for and x-if on the same template, alpinejs throws error ❌ Uncaught ReferenceError: x is not defined ❌<template x-for="x in list" x-if="x.prop==check">❌. Ideally, it should be fixed to accept both x-for and x-if on the same template.

For now, the solution seems to be:

<template x-for="x in list.filter(x => x.prop==check)">
  ...
</template>

✅

[ekwoka]

One factor about mixing x-for and x-if on the template, is that we see people here trying to use it and wanted 2 totally different things.

One group, like you, wants

x-for item of items
  x-if item meets condition
    render item

the other group wants

x-if some condition
  x-for item of items
    render item

Considering handling both of these in the x-for expression is fairly simple anyway

item of items.filter(item => item.condition)
item of condition ? items : []

for each respectively

It might be better to have it clearly misbehave (maybe give a specific error) than have to make a decision.

Technically, satisfying the second would also satisfy the first, but with more work that is likely intended.

[rocco16v]

I'm having the same issue but I'm using a function for the x-if variable value.

<template x-for="item in data">
    <div>
        <p>TEXT 1</p>
        <template x-if="isDisplayed(item.name)">
            <div class="row">
                <p>TEXT 2</p>
                <div x-text="`Total: ${showTotal()}`"></div>
            </div>
        </template>
    </div>
</template>

I have console.log inside each function and it logs the results (and execution) of both functions, bool for isDisplayed() and int for showTotal() but nothing inside the x-if template gets displayed. When I run this only "TEXT 1" appears on screen even when the isDisplayed() function returns true. I tried the solutions listed before but had no change in results. What am I missing?

[ekwoka]

This should work, can you demo it at all?

[rocco16v]

Sorry its taken me a long time to reply. Had someone else from my team look at it and it seems the issue is how I'm loading the data as the issue only happens on the first load but works on the second try.