Я новичок в 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>
С этим кодом вывод будет выглядеть так:
Поля сведений о пользователях строятся после итогового значения списка. И данных вроде электронной почты пользователя там нет. Что мне не хватает? Как исправить этот код?
Вы можете получить доступ к проекту Codepen из здесь.
Любая помощь была бы признательна!
2 ответа
Я пытался изменить некоторые HTML ТАБЛИЦЫ, наконец, я достиг ожидаемого результата. Вот ссылка на код: 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>
Спасибо @Serkan Eken. Определение template вне tbody решило проблему. Должно получиться так:
<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>
И ожидаемый результат:
