Livewire嵌套输入字段异常：点击添加人员按钮无法新增行

核心问题原因 #

Livewire对数组的响应式更新检测依赖于属性重新赋值，直接使用array_push或$array[] =修改数组时，部分场景下无法触发组件更新；而使用Laravel集合（对象类型）时，Livewire能更可靠地跟踪集合的变化。此外，模型的可填充属性配置错误也可能导致绑定失效。

解决方案一：使用Laravel集合存储人员数据 #

这是最稳妥的方案，集合的内置方法（如push）会被Livewire自动检测到变化。

组件类代码

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\People;

class RequestGuide extends Component
{
    // 定义为集合类型，无需初始赋值
    public $people;

    public function mount()
    {
        // 初始化空集合，也可在此加载已有人员数据
        $this->people = collect();
        
        // 测试：mount时预添加2行数据（可选）
        // $this->people->push(new People());
        // $this->people->push(new People());
    }

    public function addPerson()
    {
        // 直接push新的模型实例
        $this->people->push(new People());
    }

    public function render()
    {
        return view('livewire.request-guide');
    }
}

视图文件代码（request-guide.blade.php）

<div>
    <button wire:click="addPerson" class="btn btn-primary">Add Person</button>

    <table class="table mt-3">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            @foreach($people as $index => $person)
                <tr>
                    <td>{{ $index + 1 }}</td>
                    <td>
                        <input type="text" wire:model="people.{{ $index }}.name" class="form-control">
                    </td>
                    <td>
                        <input type="number" wire:model="people.{{ $index }}.age" class="form-control">
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

解决方案二：坚持使用数组的兼容写法 #

如果必须用数组存储，修改数组后需要重新赋值触发响应式更新：

public $people = [];

public function addPerson()
{
    $newPerson = new People();
    // 先添加元素
    $this->people[] = $newPerson;
    // 重新赋值数组，强制Livewire检测变化
    $this->people = $this->people;
    
    // 或者用array_merge一步完成
    // $this->people = array_merge($this->people, [$newPerson]);
}

关键注意事项 #

1. 模型可填充属性：确保People模型中配置了$fillable，包含所有需要在视图中绑定的字段，否则Livewire无法更新模型属性：

   class People extends Model
   {
       protected $fillable = ['name', 'age']; // 按需添加字段
   }
   

2. Livewire版本：确保使用最新版Livewire，旧版本存在响应式检测的bug。
3. 视图绑定语法：数组/集合元素的绑定必须使用wire:model="people.{{ $index }}.字段名"的格式，确保索引正确对应。

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