模板内的模板在alpine js中不工作

Question

我在Alpine js中遇到了一个奇怪的问题。因此，我从后端接收到一个多维数组，并且必须以表格格式表示该数组。但是，alpine js不允许我这样做。下面是我的代码

<tbody>
<template x-for="(user, index) in users" :key="index">
<template x-for="(shopping_item, subIndex) in user.shopping_items" :key="subIndex">
<tr>
<td x-text="shopping_item.item_name" class="text-right"></td>
<td x-text="shopping_item.quantity" class="text-right"></td>
<td x-text="shopping_item.total_price.toFixed(2)" class="text-right"></td>
</tr>
</template>
</template>
</tbody>

循环只运行一次，然后给出一个错误说shopping_item没有定义，但是当我像这样在这两个模板之间添加<div>时。

<template x-for="(user, index) in users" :key="index">
<div>
<template x-for="(shopping_item, subIndex) in user.shopping_items" :key="subIndex">
<tr>
<td x-text="shopping_item.item_name" class="text-right"></td>
<td x-text="shopping_item.quantity" class="text-right"></td>
<td x-text="shopping_item.total_price.toFixed(2)" class="text-right"></td>
</tr>
</template>
</div>
</template>

，它工作得很好，没有任何错误，但搞砸了表的设计。有更好的方法吗?如有任何帮助，不胜感激。

Answer 1

根据文档:

x-for必须在<template>元素上声明，<template>元素必须只包含一个根元素

这个根不能是<template>标签。

注:如果它破坏了你的样式，你可能需要一个不同的方法，例如不同的HTML结构，或不同的方式来处理你的数据。

Answer 2

节选自javascript.info

一个有趣的"特例"是表。根据DOM规范，它们必须有tbody标记，但是HTML文本可以省略它。然后浏览器自动在DOM中创建主体....你看到了什么?那人不知从哪儿冒出来的。在使用表时，我们应该记住这一点，以避免意外。

也许添加一个tbody而不是div可以解决样式问题。