Livewire 3嵌套组件异常：删除非最后记录后按钮失效

核心问题：错误调用mount方法 #

你在MonumentoCrud的update方法里直接调用mount刷新数据，这是Livewire的错误用法。mount是组件初始化时的生命周期方法，手动调用会打乱组件内部状态管理，导致子组件（ActionLinks）的key与实例映射混乱，最终出现按钮消失、失效的问题。

其他辅助问题 #

• input类型无效：模板里的<input type="aforo">是错误类型，应改为type="number"或type="text"。
• 关联检查逻辑错误：@empty($monumento->telefono->telefono)会在$monumento->telefono为null时抛出报错，需先判断关联是否存在。
• 属性初始化冗余：mount方法里的默认参数可以简化，避免重复赋值。

修正后的代码 #

MonumentoCrud组件 #

<?php

namespace App\Livewire;

use App\Models\Monumento;
use Livewire\Component;
use Illuminate\Support\Collection;
use Livewire\Attributes\On;

class MonumentoCrud extends Component
{
    public Collection $monumentos;

    public string $newNombre = '';
    public string $newAforo = '';
    public string $newProvincia = '1';

    public function mount(Collection $monumentos = new Collection()){
        $this->monumentos = $monumentos->isEmpty() ? Monumento::all() : $monumentos;
    }

    public function guardar(){
        Monumento::create([
            'nombre' => $this->newNombre,
            'aforo' => $this->newAforo,
            'provincia' => $this->newProvincia,
        ]);
        $this->reset(['newNombre', 'newAforo']);
        $this->monumentos = Monumento::all();
    }

    #[On('refreshData')]
    public function update(){
        // 直接重新赋值数据集合，不要调用mount
        $this->monumentos = Monumento::all();
    }

    public function render()
    {
        return view('livewire.monumento-crud');
    }
}

MonumentoCrud模板 #

<div>
    <form wire:submit='guardar'>
        <input type="text" wire:model="newNombre" placeholder="Nombre">
        <!-- 修正input类型为数字 -->
        <input type="number" wire:model="newAforo" placeholder="Aforo">
        <button type="submit">Guardar</button>
    </form>
    <table>
        <thead>
            <th>Nombre</th>
            <th>Aforo</th>
            <th>Contacto</th>
            <th>Acción</th>
        </thead>
        <tbody>
            @foreach($monumentos as $monumento)
            <tr wire:key="{{ $monumento->id }}">
                <td>{{ $monumento->nombre }}</td>
                <td>{{ $monumento->aforo }}</td>
                <!-- 先检查关联是否存在，避免报错 -->
                @if($monumento->telefono)
                <td>{{ $monumento->telefono->telefono }}</td>
                @else
                <td>Contacto no disponible</td>
                @endif
                <td><livewire:action-links :monumento="$monumento" :key="$monumento->id" /></td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

ActionLinks组件（优化参数校验） #

<?php

namespace App\Livewire;

use App\Models\Monumento;
use Livewire\Component;

class ActionLinks extends Component
{
    public Monumento $monumento;

    // 强制传入有效模型实例，移除默认空模型
    public function mount(Monumento $monumento)
    {
        $this->monumento = $monumento;
    }

    public function borrar(){
        $this->monumento->delete();
        $this->dispatch('refreshData');
    }

    public function render()
    {
        return view('livewire.action-links');
    }
}

内容的提问来源于stack exchange，提问作者José L.