刪除行后如何使用 livewire 更新表

Question

我有一個顯示客戶聯系人表格的 livewire 組件，表格的每一行都有一個刪除按鈕，該按鈕調用一個使用 LivewireUI 模態（ https://github.com/wire-elements/modal ）的確認框。 確認刪除此組件后，會從數據庫中刪除該行，但不會刷新表並刪除此已刪除元素。

在父組件（表）中，我設置了一個protected $listeners =['refreshTable' => '$refresh']; 在孩子（確認彈出表單）中，我使用$this->emitUp( 'refreshTable' ); 但它不會刷新。 我也使用過$this->emit( 'refreshTable' ); 但這也不起作用。

以下是文件： DeleteContact.php

<?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->closeModal();
        $this->emitUp( 'refreshTable' );
    }

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

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

}

它是刀片文件 (delete-contact.blade.php)

<x-modal formAction="delete">
    <x-slot name="title">
        Delete Contact
    </x-slot>

    <x-slot name="content">
        <input type="hidden" name="contact_id" value="{{ $contact_id }}"/>
        Are you sure you wish to delete this contact?
    </x-slot>

    <x-slot name="buttons">
        <x-jet-button class="mx-2" type="submit">
            {{ __('Yes') }}
        </x-jet-button>
        <x-jet-button type="button" class="mx-2" wire:click="$emit('closeModal', ['contact_id' => $contact_id])">
            {{ __('No') }}
        </x-jet-button>
    </x-slot>
</x-modal>

渲染表格的組件：ContactsTable.php

<?php

namespace App\Http\Livewire;

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

class ContactsTable extends Component
{
    protected $listeners =['refreshTable' => '$refresh'];

    public Client $client;
    public $clientContacts;

    public function mount( Client $client )
    {
        $this->clientContacts = ClientContact::where( 'client_id', $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();
    }
}

及其刀片文件（contacts-table.blade.php）

<div class="col-span-6 sm:col-span-4">
    <a
        class="inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-100 dark:text-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition"
        wire:click="addNewContact"
    >
        {{ __('Add') }}
    </a>
    <p>&nbsp;</p>
    <table id="contacts" class="table table-striped table-bordered table-hover">
        <thead>
        <td>Name</td>
        <td>Email</td>
        <td>Phone</td>
        <td style="width: 20px;"></td>
        </thead>
        <tbody>
        @foreach( $clientContacts as $contact )
            <tr id="{{ $contact->id }}">
                <td>
                    <input name="contact_{{ $contact->id }}_title" class="w-full" type="text" value="{{ $contact->title }}"/>
                </td>
                <td>
                    <input name="contact_{{ $contact->id }}_email" class="w-full" type="text" value="{{ $contact->email }}"/>
                </td>
                <td>
                    <input name="contact_{{ $contact->id }}_phone_number" class="w-full" type="text" value="{{ $contact->phone_number }}"/>
                </td>
                <td class="width-8">
                    <a
                        class="cursor-pointer"
                        wire:click="$emit( 'openModal', 'delete-contact',{{ json_encode(['contact_id' => $contact->id]) }} )"
                    >
                        DELETE
                    </a>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>

    <p class="mt-1 text-sm text-gray-600">
        Edit the cells above, click the bin to delete or the + to add a new row to populate with a new contact.
    </p>
</div>

此外，如果當我單擊表格上方的“添加”按鈕時它很有用，則會添加新行（但這與沒有確認框的組件位於同一組件內）

謝謝

Answer 1

“在 Livewire 組件中，您使用 mount() 而不是類構造函數 __construct() 就像您可能習慣的那樣。注意：mount() 僅在組件第一次安裝時才被調用，即使組件時也不會再次調用被刷新或重新渲染。”

class ContactsTable extends Component

{

protected $listeners =['refreshTable' => '$refresh'];

public Client $client;

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

public function render()
{
    return view('livewire.contacts-table', [
        'clientContacts' => $this->readData(),
    ]);
}

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

}