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.