how to update a table with livewire after deleting a row

Question

I have a livewire component that shows a table of client contacts, each row of the table has a delete button which calls a confirm box which uses LivewireUI Modal ( https://github.com/wire-elements/modal ). Upon confirming to delete this component deletes the row from the database but it doesn't refresh the table and remove this deleted element.

In the parent component (the table) I have set a listener protected $listeners =['refreshTable' => '$refresh']; and in the child (confirm popup form) I use $this->emitUp( 'refreshTable' ); but it doesn't refresh. I have also used $this->emit( 'refreshTable' ); but this didn't work either.

Here are the files: 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;
    }

}

it's blade file (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>

The component to render the table: 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();
    }
}

And its blade file (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>

Additionally if it's useful when I click the Add button above the table the new row is added (but this is inside the same component as doesn't have the confirm box)

thanks

Answer 1

"In Livewire components, you use mount() instead of a class constructor __construct() like you may be used to. NB: mount() is only ever called when the component is first mounted and will not be called again even when the component is refreshed or rerendered."

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

}