Help need about strange issue of x-for.

[leopku]

I'm new to Alpinejs.

There are two codes which the first works but the second sucks.

• the one worked correctly

  <template x-if="$store.pokenmon" x-for="(dir, index) in $store.pokenmon.dirs" :key="index">
      <tr>
        <td x-text="dir.path"></td>
      </tr>
  </template>

• the one returned many blank sections

    <template x-if="$store.pokenmon" x-for="(dir, index) in $store.pokenmon.dirs" :key="index">
      <section>
        <tr>
          <td x-text="dir.path"></td>
        </tr>
      </section>
    </template>

Environment

• alpine@v2.8.0
• Chrome 86

How to make the second one worked as expected?

[KevinBatdorf]

That's not valid HTML so the browser itself will remove it as soon as Alpine inserts it into the dom.

[leopku]

Thanks for your reply.

Actually, theses codes are part of my table.

        <section>
          <table>
                <thead>
                    <tr>
                        <th>head1</th>
                        <th>head2</th>
                    </tr>
                </thead>
                <section>
                  <tr>
                    <td>You will see this text, but no td, or tr</td>
                    <td>You will see this text, but no td, or tr</td>
                  </tr>
                </section>
          </table>
        </section>

Above code rendered a table as expected.
See a demo here

[KevinBatdorf]

The browser is guessing the markup there as well. You can't put a <section> element there in a table. You can use <tbody> instead of section though and it will render properly. But seems you probably want just a <tr>?

[KevinBatdorf]

In your demo, this is what the browser is rendering it as:

[SimoTod]

It does not, the browser fixes it and moves tr and td outside section. When alpine kicks in, it finds 2 elements as root inside x-for which is not allowed. If you open the dev console you should be able to see a warning. Your section tag should be removed or moved inside td

[leopku]

Got it.

Thanks @KevinBatdorf and @SimoTod.

[leopku]

I changed table to other tags.

I really troubled with nest x-for now.

[KevinBatdorf]

Make sure you have a spacer:

<template x-for>
  <div> <!-- spacer -->
    <template x-for>

[leopku]

Thank you @KevinBatdorf .

I had a nested json like

{
  "path": "."
  "dirs": [
    {
      "path": "./dir001",
      "dirs": [ ... ],
      "files": [ ... ],
    },
    {
      "path": "./dir002",
      "dirs": [ ... ],
      "files": [ ... ],
    }
  ]
  "files": [
    {"name":"file001", "size": 111},
    {"name": "file002", "size": 222}
  ]
}

I just want to display top 2 level dirs with details and summary

• This code works

    <template x-if="$store.pokenmon" x-for="(dir, index) in $store.pokenmon.dirs" :key="index">
        <details>
          <summary x-text="dir.path"></summary>
        </details>
    </template>

• This code broken with dir undefined

    <template x-if="$store.pokenmon" x-for="(dir, index) in $store.pokenmon.dirs" :key="index">
        <details>
          <summary x-text="dir.path"></summary>
          <template x-for="(subdir, subindex) in dir" :key="subindex">
            <details>
              <summary x-text="subdir.path"></summary>
            </details>           
          </template>
        </details>
    </template>

Any ideas?

[KevinBatdorf]

Not sure, but you can only loop over an array. Maybe that's the issue here?

https://codepen.io/KevinBatdorf/pen/rNMwjVx

[leopku]

Finally I found the issue by compare words by words between your codes and mine.
The only difference between us is just section and div. 🤣

After changing section to div, I got what I want.

I don't know x-data in section tag not working sometimes is a feature or a bug?

[SimoTod]

It sounds weird. Section is pretty much a div with a semantic meaning.
It works correctly to me: https://codepen.io/SimoTod/pen/VwKWpbO