Alpine JS Table 数据绑定
Alpine JS Table Data Binding
我是 Alpine JS 的新手。我想用这样的详细行设计我的 table:
我写了一个简单的 HTML table 像这样:
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Username</th>
</tr>
<tr>
<td>1</td>
<td>Leanne Graham</td>
<td>Bret</td>
</tr>
<tr>
<td colspan="3">User Email : Sincere@april.biz</td>
</tr>
</table>
我试图将我的 JSON 绑定到这个 table。那时,它没有按预期工作。这是我尝试过的:
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Username</th>
</tr>
<template x-for="u in users" :key="u.id">
<tr>
<td x-text="u.id"></td>
<td x-text="u.name"></td>
<td x-text="u.username"></td>
</tr>
<tr>
<td x-text="u.email" colspan="3"></td>
</tr>
</template>
</table>
使用此代码,输出将如下所示:
用户详细信息字段正在列表总数之后构建。而且那里没有用户电子邮件之类的数据。我错过了什么?我该如何修复此代码?
您可以从 here 访问 Codepen 项目。
如有任何帮助,我们将不胜感激!
感谢@Serkan Eken。在 tbody
之外定义 template
解决了这个问题。它应该是这样的:
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Username</th>
</tr>
</thead>
<template x-for="(user, index) in users" :key="index">
<tbody>
<tr>
<td x-text="user.id"></td>
<td x-text="user.name"></td>
<td x-text="user.username"></td>
</tr>
<td x-text="user.email" colspan="3"></td>
</tbody>
</template>
</table>
以及预期输出:
我试过修改一些关于HTML的表格,终于达到了你预期的结果。这是代码笔link:codepen
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Username</th>
</tr>
</thead>
<template x-for="(user, index) in users" :key="index">
<tbody>
<tr>
<td x-text="user.id"></td>
<td x-text="user.name"></td>
<td x-text="user.username"></td>
</tr>
<td x-text="user.email" colspan="3"></td>
</tbody>
</template>
</table>
我是 Alpine JS 的新手。我想用这样的详细行设计我的 table:
我写了一个简单的 HTML table 像这样:
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Username</th>
</tr>
<tr>
<td>1</td>
<td>Leanne Graham</td>
<td>Bret</td>
</tr>
<tr>
<td colspan="3">User Email : Sincere@april.biz</td>
</tr>
</table>
我试图将我的 JSON 绑定到这个 table。那时,它没有按预期工作。这是我尝试过的:
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>Username</th>
</tr>
<template x-for="u in users" :key="u.id">
<tr>
<td x-text="u.id"></td>
<td x-text="u.name"></td>
<td x-text="u.username"></td>
</tr>
<tr>
<td x-text="u.email" colspan="3"></td>
</tr>
</template>
</table>
使用此代码,输出将如下所示:
用户详细信息字段正在列表总数之后构建。而且那里没有用户电子邮件之类的数据。我错过了什么?我该如何修复此代码?
您可以从 here 访问 Codepen 项目。
如有任何帮助,我们将不胜感激!
感谢@Serkan Eken。在 tbody
之外定义 template
解决了这个问题。它应该是这样的:
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Username</th>
</tr>
</thead>
<template x-for="(user, index) in users" :key="index">
<tbody>
<tr>
<td x-text="user.id"></td>
<td x-text="user.name"></td>
<td x-text="user.username"></td>
</tr>
<td x-text="user.email" colspan="3"></td>
</tbody>
</template>
</table>
以及预期输出:
我试过修改一些关于HTML的表格,终于达到了你预期的结果。这是代码笔link:codepen
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Username</th>
</tr>
</thead>
<template x-for="(user, index) in users" :key="index">
<tbody>
<tr>
<td x-text="user.id"></td>
<td x-text="user.name"></td>
<td x-text="user.username"></td>
</tr>
<td x-text="user.email" colspan="3"></td>
</tbody>
</template>
</table>