Laravel 9.x/Livewire中foreach循环表格数据单行显示问题求助

常见问题根源 #

• 表格HTML结构嵌套错误：把@foreach放在<tr>标签内部，导致所有产品的单元格都被塞进同一行
• Livewire数据渲染逻辑问题：循环范围没有覆盖整个表格行，或者未给循环项添加唯一标识导致DOM diff异常

修正方案（结合典型错误代码） #

假设你的原视图代码是这类错误写法：

<table>
    <thead>
        <tr>
            <th>产品名称</th>
            <th>单价</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            @foreach($licitacao->productLicitacoes as $product)
                <td>{{ $product->name }}</td>
                <td>{{ $product->price }}</td>
            @endforeach
        </tr>
    </tbody>
</table>

这种写法会把所有产品的<td>都塞进同一个<tr>里，自然所有产品都显示在一行。

正确写法 #

将@foreach包裹整个<tr>标签，让每个产品对应独立的表格行：

<table>
    <thead>
        <tr>
            <th>产品名称</th>
            <th>单价</th>
        </tr>
    </thead>
    <tbody>
        @foreach($licitacao->productLicitacoes as $product)
            <tr wire:key="product-{{ $product->id }}">
                <td>{{ $product->name }}</td>
                <td>{{ $product->price }}</td>
            </tr>
        @endforeach
    </tbody>
</table>

添加wire:key是为了让Livewire准确识别每个循环项，避免动态更新数据时出现渲染异常。

额外验证项 #

• 确认$licitacao->productLicitacoes返回的是集合实例，而非单个模型。可以在Livewire组件中用dd($licitacao->productLicitacoes)快速验证数据结构
• 核对模型关联配置（避免关联逻辑错误导致数据异常）：
  Licitacao模型中的关联：

  public function productLicitacoes()
  {
      return $this->hasMany(ProductLicitacao::class);
  }
  

  ProductLicitacao模型中的关联：

  public function licitacao()
  {
      return $this->belongsTo(Licitacao::class);
  }
  

  确保product_licitacoes表中存在licitacao_id外键，且数据已正确关联。

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