如何在删除行后使用livewire更新表

Question

我有一个livewire组件，它显示一个客户端联系人表，表的每一行都有一个delete按钮，它调用一个使用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;
    }

}

它是刀片文件(删除-contact.blde.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.blde.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>

此外，如果当我单击表上方的Add按钮时，它很有用，那么将添加新的行(但这是在没有确认框的同一组件中)。

谢谢

Answer 1

“在Livewire组件中，您使用挂载()代替类构造函数__construct()，就像您可能习惯的那样。NB:只有在组件首次挂载时才会调用，即使组件被刷新或重命名，也不会再次调用。”

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();
}

}