multiple x-if not working inside x-for directive

[mrniamster]

Hello ,

Issue: When i try to have multiple x-if's inside x-for only the top-most x-if renders the below one doesn't
version: 3.12.1
build (npm/script) : script tag

Code:

<template x-for="(st,index) in $store.storyfly.highlights[$store.storyfly.active.highlight].stories" :key="index">
      <template  :key="index" x-if="st.type!='video'">
      <div  class="slide video" x-bind:data-timeout="st.timeout">
      <video :src="st.src" preload="true" muted="muted"> </video>
      </div>
      </template>
      <template  :key="index" x-if="st.type==='img'">
      <div  class="slide" x-bind:data-timeout="st.timeout">
      <img :src="st.src" alt="Image" title="Title 1" />
      </div>
      </template>
</template>

Dom Preview:

The below template with x-if="st.type==='img'" is not rendering

I have re-checked my data also, everything is correct,

[ekwoka]

It's in the documentation, but templates can only have one child.

If you need to have two, then wrap them in a dummy element.

[mrniamster]

@ekwoka Can you show me a example?

I tried this ,

<template x-for>
<div x-if="x==1"></div>
<div x-if="x==2"></div>
</template>

Still for x==2, it doesn't render the div, only the above one is loading. i know template can have only x1 root element.

[ekwoka]

You didn't post anything there.

But basicallye

template xfor
  div
    template xif
    template xif

[mrniamster]

@ekwoka This is quite strange, How I wanted it to be working , it's working good at OLD verison :
https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js

But the same code i try with Newer version it doesn't work

v3.1

v1.9.4

[mrniamster]

@ekwoka How you told in above comment i tried that too in v3.1.x
It worked, but the idea here was to not create that extra div, thats a problem !

[trych]

Creating the extra div solves your actual problem, so how is this a problem?

[ekwoka]

What's the problem with the div?

You asked how to do it this is how you do it.

[javiabellan]

Yes, creating an extra div does not solve the problem completely, because it changes the style: Example for printing row elems and on each iteration i can render more than one element.

<div class="flex flex-row"> <!-- tailwind code for row style -->
  <template x-for="item in items">
    <div> <!-- THIS BREAKS MY ROW STYLE IF THE 2 INNER IFs ARE TRUE -->

      <template x-if="...condition 1...">
        ...
      </template>

      <template x-if="...condition 2...">
        ...
      </template>

    </div>
  </template>
 </div>

[ekwoka]

here you can use display: content to make the div a kind of layout passthrough element

[javiabellan]

Thanks, that fix my problem.

However the i think the alpine v2 approach is better. There is any reason for <template> only having 1 child restriction ? Is this an Alpine v3 issue or a general HTML restriction? I want to learn why.

[SimoTod]

it was the same in V2, Alpine has never supported more then 1 child element.
Because there isn't a virtual DOM, it's hard and error prone to track multiple children, especially if those are nested x-ifs or x-fors that could spawn multiple child elements. You would end up implementing hidden dom element lists in the background which could lead to memory leaks if not cleaned properly and a lot of computation to understand where each element should be placed in the page when re-rendering those variables.

[javiabellan]

thanks!

[ekwoka]

I have looked at it, and it doesn't seem technically possible, but while it seems fairly simple, it starts to become quite complicated to make it work in all cases.

So far, I haven't really encountered or seen anything that really couldn't be done with a single root element instead (whether a display:content or not).

Maybe something to re-evaluate after current open template directive PRs are closed.