如何解决 alpine js 中意外数量的根元素问题？

Question

我正在研究 alpine js 中的功能，我需要在模板标签内添加一个单选按钮。这就是我正在做的。

<div class="customRadioStyle">
    <template x-for="name in record.names">
        <input type="radio" :value="name.value" :id="name.id">
        <label :for="name.id" x-text="name.value"></label>
    </template>
</div>

但是这段代码给出了以下错误。

Alpine: <template> tag with [x-for] encountered with an unexpected number of root elements. Make sure <template> has a single root element.

有解决办法吗？

我也检查了这个 link 但仍然找不到解决方案。 https://github.com/alpinejs/alpine/issues/539

如有任何帮助，我们将不胜感激。

Answer 1

按照错误提示进行操作，并确保 <template> 中只有一个元素。在你的情况下，你可以在 <label> 中添加 <input> 或者用 <div>:

包裹它们

window.MyComponent = () => ({
  names: [{
    id: 'name1',
    value: 'Name 1',
  }, {
    id: 'name2',
    value: 'Name 2',
  }, {
    id: 'name3',
    value: 'Name 3',
  }],
});

body {
  font-family: monospace;
}

label {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

input {
  margin: 0 8px 0 0;
}

<div x-data="MyComponent()">
  <template x-for="name in names">
    <label :for="name.id">
      <input type="radio" :value="name.value" :id="name.id" name="radioGroup">
      <span x-text="name.value"></span>
    </label>
  </template>
</div>

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>

请注意，在事件处理程序中我仍将其称为 e，但在 HTML 中我使用了 download($event) 而不是 download(e)。

如何解决 alpine js 中意外数量的根元素问题？

How to solve unexpected number of root elements issue in alpine js?

alpine.js