Alpine.js嵌套template循环失效问题求助

你遇到的问题根源是浏览器对表格元素的结构有严格限制：<tbody>的直接子元素只能是<tr>或符合规范的<template>，嵌套两层<template>会导致Alpine无法正确追踪变量作用域，进而报错shopping_item is not defined。而添加<div>虽然能让Alpine正常运行，但<div>不属于表格的合法子元素，浏览器会自动将其移出表格，破坏布局。

这里有两种更优的解决方案：

方案一：扁平化数据（推荐） #

在Alpine的数据源里把多维数组转换成一维数组，直接用单层循环渲染，既简洁又符合表格结构：

数据处理部分 #

document.addEventListener('alpine:init', () => {
  Alpine.data('shoppingList', () => ({
    users: [], // 后端返回的多维数组
    get allShoppingItems() {
      // 把所有用户的购物项合并成一个数组
      return this.users.flatMap(user => user.shopping_items);
    }
  }));
});

模板部分 #

<table x-data="shoppingList">
  <thead>
    <tr>
      <th>商品名称</th>
      <th>数量</th>
      <th>总价</th>
    </tr>
  </thead>
  <tbody>
    <template x-for="(item, index) in allShoppingItems" :key="index">
      <tr>
        <td x-text="item.item_name" class="text-right"></td>
        <td x-text="item.quantity" class="text-right"></td>
        <td x-text="item.total_price.toFixed(2)" class="text-right"></td>
      </tr>
    </template>
  </tbody>
</table>

方案二：用多个<tbody>实现分组渲染 #

如果需要保留用户的分组结构（比如每个用户的购物项单独成块），可以利用一个<table>允许包含多个<tbody>的HTML规范，外层循环生成<tbody>，内层循环生成<tr>：

模板部分 #

<table x-data="{ users: [] }">
  <thead>
    <tr>
      <th>商品名称</th>
      <th>数量</th>
      <th>总价</th>
    </tr>
  </thead>
  <!-- 外层循环：每个用户对应一个tbody -->
  <template x-for="(user, index) in users" :key="index">
    <tbody>
      <!-- 可选：添加用户标题行，区分不同用户的购物项 -->
      <tr>
        <td colspan="3" x-text="`用户：${user.name}`" class="font-bold bg-gray-100"></td>
      </tr>
      <!-- 内层循环：渲染当前用户的所有购物项 -->
      <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>
    </tbody>
  </template>
</table>

这两种方案都严格遵循HTML表格规范，不会破坏布局，同时解决了Alpine嵌套循环的变量作用域问题。

内容的提问来源于stack exchange，提问作者Jane