Alpine.js 中的多个根节点

Question

使用最新的 Alpine.js (v3.7.0) 构建数据表。 尝试实现子行时遇到问题（即主/父行下的附加可切换行）。

简化版：

<tbody>
<template x-for="row in currentPageData" :key="row.id">
    <tr>
        <td>foo</td>
        <td>bar</td>
        <td>baz</td>
    </tr>
    <tr>
        <td colspan="3">
            Some additional content
        </td>
    </tr>
</template>
</tbody>

虽然我在控制台中没有收到任何错误，但第二个节点 (tr) 并未呈现。我认为这是因为 Alpine 需要一个根元素。有什么办法可以解决，因为用 div 包装是无效的 HTML，而 tbody 包装器会破坏布局？

Answer 1

感谢 Alpine 模板在服务器端呈现，我最终得到了以下解决方法：

当表有子行时，我删除根 tbody 并用自己的 tbody 包装每个 tr 对。