title: how to update a table with livewire after deleting a row
body: <p>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 (<a href="https://github.com/wire-elements/modal" rel="nofollow noreferrer">https://github.com/wire-elements/modal</a>). Upon confirming to delete this component deletes the row from the database but it doesn't refresh the table and remove this deleted element.</p>
  <p>In the parent component (the table) I have set a listener <code>protected $listeners =['refreshTable' =&gt; '$refresh'];</code> and in the child (confirm popup form) I use <code>$this-&gt;emitUp( 'refreshTable' );</code> but it doesn't refresh. I have also used <code>$this-&gt;emit( 'refreshTable' );</code> but this didn't work either.</p>
  <p>Here are the files:
  DeleteContact.php</p>
  <pre><code>&lt;?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-&gt;contact_id );
          if ( is_null( $contact-&gt;title ) || $contact-&gt;title === '' ) {
              $contact-&gt;forceDelete();
          } else {
              $contact-&gt;delete();
          }
          $this-&gt;closeModal();
          $this-&gt;emitUp( 'refreshTable' );
      }
  
      public static function closeModalOnEscape(): bool
      {
          return false;
      }
  
      public static function destroyOnClose(): bool
      {
          return true;
      }
  
  }
  </code></pre>
  <p>it's blade file (delete-contact.blade.php)</p>
  <pre><code>&lt;x-modal formAction=&quot;delete&quot;&gt;
      &lt;x-slot name=&quot;title&quot;&gt;
          Delete Contact
      &lt;/x-slot&gt;
  
      &lt;x-slot name=&quot;content&quot;&gt;
          &lt;input type=&quot;hidden&quot; name=&quot;contact_id&quot; value=&quot;{{ $contact_id }}&quot;/&gt;
          Are you sure you wish to delete this contact?
      &lt;/x-slot&gt;
  
      &lt;x-slot name=&quot;buttons&quot;&gt;
          &lt;x-jet-button class=&quot;mx-2&quot; type=&quot;submit&quot;&gt;
              {{ __('Yes') }}
          &lt;/x-jet-button&gt;
          &lt;x-jet-button type=&quot;button&quot; class=&quot;mx-2&quot; wire:click=&quot;$emit('closeModal', ['contact_id' =&gt; $contact_id])&quot;&gt;
              {{ __('No') }}
          &lt;/x-jet-button&gt;
      &lt;/x-slot&gt;
  &lt;/x-modal&gt;
  </code></pre>
  <p>The component to render the table:
  ContactsTable.php</p>
  <pre><code>&lt;?php
  
  namespace App\Http\Livewire;
  
  use App\Models\Client;
  use App\Models\ClientContact;
  use Livewire\Component;
  
  class ContactsTable extends Component
  {
      protected $listeners =['refreshTable' =&gt; '$refresh'];
  
      public Client $client;
      public $clientContacts;
  
      public function mount( Client $client )
      {
          $this-&gt;clientContacts = ClientContact::where( 'client_id', $client-&gt;id )-&gt;get();
      }
  
      public function render()
      {
          return view('livewire.contacts-table');
      }
  
      public function addNewContact()
      {
          $client_id = $this-&gt;client-&gt;id;
          $new = ClientContact::make();
          $new-&gt;client_id = $client_id;
          $new-&gt;save();
          $this-&gt;clientContacts = ClientContact::where( 'client_id', $client_id )-&gt;get();
      }
  }
  </code></pre>
  <p>And its blade file (contacts-table.blade.php)</p>
  <pre><code>&lt;div class=&quot;col-span-6 sm:col-span-4&quot;&gt;
      &lt;a
          class=&quot;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&quot;
          wire:click=&quot;addNewContact&quot;
      &gt;
          {{ __('Add') }}
      &lt;/a&gt;
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
      &lt;table id=&quot;contacts&quot; class=&quot;table table-striped table-bordered table-hover&quot;&gt;
          &lt;thead&gt;
          &lt;td&gt;Name&lt;/td&gt;
          &lt;td&gt;Email&lt;/td&gt;
          &lt;td&gt;Phone&lt;/td&gt;
          &lt;td style=&quot;width: 20px;&quot;&gt;&lt;/td&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          @foreach( $clientContacts as $contact )
              &lt;tr id=&quot;{{ $contact-&gt;id }}&quot;&gt;
                  &lt;td&gt;
                      &lt;input name=&quot;contact_{{ $contact-&gt;id }}_title&quot; class=&quot;w-full&quot; type=&quot;text&quot; value=&quot;{{ $contact-&gt;title }}&quot;/&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input name=&quot;contact_{{ $contact-&gt;id }}_email&quot; class=&quot;w-full&quot; type=&quot;text&quot; value=&quot;{{ $contact-&gt;email }}&quot;/&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;input name=&quot;contact_{{ $contact-&gt;id }}_phone_number&quot; class=&quot;w-full&quot; type=&quot;text&quot; value=&quot;{{ $contact-&gt;phone_number }}&quot;/&gt;
                  &lt;/td&gt;
                  &lt;td class=&quot;width-8&quot;&gt;
                      &lt;a
                          class=&quot;cursor-pointer&quot;
                          wire:click=&quot;$emit( 'openModal', 'delete-contact',{{ json_encode(['contact_id' =&gt; $contact-&gt;id]) }} )&quot;
                      &gt;
                          DELETE
                      &lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          @endforeach
          &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;p class=&quot;mt-1 text-sm text-gray-600&quot;&gt;
          Edit the cells above, click the bin to delete or the + to add a new row to populate with a new contact.
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  <p>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)</p>
  <p>thanks</p>