Alpine JS 表格数据绑定答案

【问题标题】：Alpine JS Table Data BindingAlpine JS 表格数据绑定
【发布时间】：2021-02-25 18:37:02
【问题描述】：

我是 Alpine JS 的新手。我想用这样的详细行设计我的表：

我写了一个简单的 HTML 表格，如下所示：

       
<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>
  <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 项目。

任何帮助将不胜感激！

【问题讨论】：

标签： javascript html alpine.js

【解决方案1】：

我已经尝试更改一些关于 HTML TABLES 的内容，最后，我达到了您的预期结果。这是codepen链接：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>

【讨论】：

【解决方案2】：

感谢@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>

以及预期的输出：

【讨论】：