x-for and template not working with nested elements

[florian-sun]

Let's say we have a template with an x-for and a list item. If the list item contains, say, a button, it doesn't appear. It looks like x-for clones the template content but only the first level, the button is not cloned.
Is there a workaround?.

[danie-ramdhani]

wrap it to one element

[florian-sun]

Yes, that's what I'm doing (from the Start Here example):

<template  x-for="item in filteredItems" :key="item">
  <li  x-text="item">
    <button>test</button>
  </li>
</template>

There is only one root element in template, a list item which is wrapping a button.
This is what is rendered in the browser:

<template x-for="item in filteredItems" :key="item">
  <li x-text="item">
    <button>test</button>
  </li>
</template>
<li x-text="item">foo</li>
<li x-text="item">bar</li>
<li x-text="item">baz</li>

[ekwoka]

This is because x-text is setting the content of the LI.

Which means no button.

Where would you expect it to put the text?

[florian-sun]

So I guess x-text shd only set the text not the whole content of an element.
LI can render both a text and a button

<ul >
  <li >item1<button >test1</button></li>
  <li >item2<button >test2</button></li>
</ul>

Anyway, is there a workaround to have list items with embedded elements?

[SimoTod]

You can use a span tag

<template  x-for="item in filteredItems" :key="item">
  <li>
    <span x-text="item"></span>
    <button>test</button>
  </li>
</template>

Re So I guess x-text shd only set the text not the whole content of an element. how would you decide where to put the text?
<li>item1<button>test1</button><li> vs <li><button>test1</button>item1<li> vs <li><button>test1</button>item1<button>test1again</button><li>
It would just open a can of worms because different devs have different use cases.

[florian-sun]

That works, thank you.

how would you decide where to put the text?

Maybe looping through child nodes and using the first one which is a text node (https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes). Just saying.
Anyway I find it strange that the standard way of changing text (setting textContent) leads to removing of all child nodes (https://www.w3schools.com/jsref/prop_node_textcontent.asp). Nobody seems to care what happens with nested elements.

[ekwoka]

In your example, there was no text node technically in your example. Or at least no guarantee of one.

[florian-sun]

That's right. However the full algorithm shd be something like this:

• loop through all nodes
• find the one that is 1) a text node and 2) not a whitespace // my understanding is that it shd be at most one such node
• if this node exists, replace the content
• if this node doesn't exist, create it and attach it as first child // something like this: https://stackoverflow.com/a/15623426/628661

If the developer wants the text in some other place than the beginning, he shd create a dummy text where he wants and the algo above will replace with x-text and keep the position

[ekwoka]

That seems far more error prone than just replacing all of the text. Way easier, and more performant.