#alpine.js #root-node
#alpine.js #корневой узел
Вопрос:
Построение таблицы данных с использованием последних Alpine.js (v3.7.0). Возникла проблема при попытке реализовать дочерние строки (т. е. дополнительную переключаемую строку под основной/родительской строкой).
Упрощенная версия:
lt;tbodygt; lt;template x-for="row in currentPageData" :key="row.id"gt; lt;trgt; lt;tdgt;foolt;/tdgt; lt;tdgt;barlt;/tdgt; lt;tdgt;bazlt;/tdgt; lt;/trgt; lt;trgt; lt;td colspan="3"gt; Some additional content lt;/tdgt; lt;/trgt; lt;/templategt; lt;/tbodygt; Хотя я не получаю никаких ошибок в консоли, второй узел (tr) не отображается. Я предполагаю, что это связано с тем, что Alpine требует одного корневого элемента. Есть ли какой-либо способ обойти это, так как обертывание с div помощью недопустимого HTML и tbody обертка нарушает макет?
Ответ №1:
Благодаря шаблонам Alpine, отображаемым на стороне сервера, я получил следующий обходной путь:
Когда в таблице есть дочерние строки, я удаляю корень tbody и оборачиваю каждую tr пару tbody своими собственными.