Livewire删除表格行后如何实现表格自动刷新更新

两个核心问题导致表格不刷新：

• 你的表格组件把联系人数据存在公共属性$clientContacts中，仅在mount生命周期中查询赋值。$refresh只会触发视图重渲染，不会重新执行mount里的查询逻辑，哪怕监听到事件，属性里存的还是旧数据，自然不会移除已删除的行——你自己写的addNewContact方法能生效，就是因为新增后手动重新查询了一次数据赋值给属性。
• LivewireUI Modal是全局挂载在页面根节点的组件，和你的表格组件不存在直接父子嵌套关系，emitUp只会向modal自身的父级容器冒泡，表格组件根本收不到事件；同时你先调用closeModal()会立刻销毁弹窗组件，后续的事件发射代码根本没有执行机会。

1. 修改表格组件ContactsTable.php #

把监听器绑定到专门的刷新方法，触发时重新查询最新数据，不要直接用$refresh：

<?php

namespace App\Http\Livewire;

use App\Models\Client;
use App\Models\ClientContact;
use Livewire\Component;

class ContactsTable extends Component
{
    // 把监听器从$refresh改成调用自定义刷新方法
    protected $listeners =['refreshTable' => 'refreshContacts'];

    public Client $client;
    public $clientContacts;

    public function mount( Client $client )
    {
        $this->clientContacts = ClientContact::where( 'client_id', $client->id )->get();
    }

    // 新增刷新方法，重新查询最新联系人数据
    public function refreshContacts()
    {
        $this->clientContacts = ClientContact::where('client_id', $this->client->id)->get();
    }

    public function render()
    {
        return view('livewire.contacts-table');
    }

    public function addNewContact()
    {
        $client_id = $this->client->id;
        $new = ClientContact::make();
        $new->client_id = $client_id;
        $new->save();
        $this->clientContacts = ClientContact::where( 'client_id', $client_id )->get();
    }
}

2. 修改删除弹窗组件DeleteContact.php #

调整事件发射方式和代码顺序，用全局事件代替emitUp，先发射事件再关闭弹窗：

<?php

namespace App\Http\Livewire;

use App\Models\ClientContact;
use LivewireUI\Modal\ModalComponent;

class DeleteContact extends ModalComponent
{
    public int $contact_id = 0;

    public function render()
    {
        return view('livewire.delete-contact');
    }

    public function delete()
    {
        $contact = ClientContact::find( $this->contact_id );
        if ( is_null( $contact->title ) || $contact->title === '' ) {
            $contact->forceDelete();
        } else {
            $contact->delete();
        }
        // 先发射全局事件，确保表格组件能收到
        $this->emit( 'refreshTable' );
        // 最后再关闭弹窗，避免组件提前销毁导致事件发送失败
        $this->closeModal();
    }

    public static function closeModalOnEscape(): bool
    {
        return false;
    }

    public static function destroyOnClose(): bool
    {
        return true;
    }

}

3. （可选修复）修正取消按钮的事件写法 #

你在delete-contact.blade.php里给取消按钮绑定的closeModal传参格式不对，官方调用不需要传数组参数，改成如下写法即可：

<x-jet-button type="button" class="mx-2" wire:click="$emit('closeModal')">
    {{ __('No') }}
</x-jet-button>

修改完成后，删除操作会先发送全局刷新事件，表格组件收到后重新拉取最新的联系人数据，再关闭弹窗，页面重渲染时就会自动移除已删除的行。

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