alpine.js - 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 模板在服务器端呈现，我最终得到了以下解决方法：

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