title: How to effectively use foreach in laravel-livewire in a table when the data dynamically changes?
body: <p>I've been struggling with the <code>foreach</code> blade directive when combined with Laravel-Livewire and dynamically changing data rendered in an html table.</p>
  <p>Specific scenario:</p>
  <ul>
  <li>A table is presented to the user</li>
  <li>Each row of the table includes a clickable icon that toggles a variable associated with that row</li>
  <li>Toggling this icon visibly removes the row from the table</li>
  </ul>
  <p>It sounds simple enough but I cannot get it to work correctly.</p>
  <pre><code>&lt;?php
  
  namespace App\Http\Livewire;
  
  use Livewire\Component;
  
  class UnreconciledServices extends Component
  {
  
      public $services;
      
  
  
      public function render()
      {
          return view('livewire.unreconciled-services');
      }
  
  
      //
      // receives an invoice number and changes the &quot;reconciled&quot; value for the $aaaServices record to true
      //
     
  
      public function test($a)
      {
      }
  }
  </code></pre>
  <p>This is pretty simple - there is a function called &quot;test&quot; that accepts a variable (the function does nothing at all) and there is a collection of records called $services that has been passed in from the parent.</p>
  <p>The blade file is as follows:</p>
  <pre><code>&lt;div&gt;
          &lt;table style=&quot;width:100%&quot;&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th width=&quot;5%&quot;&gt;
  
                      &lt;/th&gt;
                      &lt;th&gt;
                          Service Date
                      &lt;/th&gt;
                      &lt;th&gt;
                          Call #
                      &lt;/th&gt;
                      &lt;th&gt;
                          Payment
                      &lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  @foreach ($services as $service)
                      {{-- &lt;span wire:key=&quot;{{$service-&gt;invoice_number}}&quot;&gt; --}}
  
                          {{-- @if ($service-&gt;reconciled == false) --}}
                              &lt;tr  id=&quot;{{$service-&gt;invoice_number}}&quot; class=&quot;text-center&quot; style=&quot;{{ $service-&gt;reconciled == 1 ? 'display:none' : 'show'}}&quot;&gt;
                                  &lt;td&gt;
                                      {{-- &lt;input class=&quot;m-2&quot; type=&quot;checkbox&quot;&gt; --}}
                                      {{-- &lt;span class=&quot;m-2&quot;&gt;&lt;i class=&quot;far fa-trash-alt text-red-500&quot;&gt;&lt;/i&gt;&lt;/span&gt; --}}
  
                                      &lt;span wire:key=&quot;{{$service-&gt;invoice_number}}&quot; wire:click=&quot;test('{{$service-&gt;invoice_number}}')&quot; class=&quot;m-2 cursor-pointer&quot;&gt;&lt;i class=&quot;lm-2 rm-2 fas fa-plus text-green-500&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      {{$service-&gt;invoice_date}}
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      {{$service-&gt;call_number}}
                                  &lt;/td&gt;
                                  &lt;td&gt;
                                      {{$service-&gt;service_price}}
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          {{-- @endif --}}
                      {{-- &lt;/span&gt; --}}
                  @endforeach
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  <p>This is a simple table with 4 columns. The 1st is a clickable icon, the other 3 are data.  Rows should only be visible if the &quot;reconciled&quot; boolean is 0.</p>
  <p>When initially rendered, the appropriate records are displayed (there are 2 that qualify and 177 that do not).  However, as soon as I click the icon - even when the function it links to has zero actual content - all records are suddenly visible <em>except</em> for the one that I've just hidden.</p>
  <p>Looking at the html change when I click the icon, the tag changes from</p>
  <p><code>&lt;tr id=&quot;21031251674&quot; class=&quot;text-center&quot; style=&quot;display:none&quot;&gt;</code></p>
  <p>to</p>
  <p><code>&lt;tr id=&quot;21031253205&quot; class=&quot;text-center&quot; style=&quot;show&quot;&gt;</code>.</p>
  <p>I have tried using livewire keys, though I'm not sure how this would affect the functionality since I'm not rendering components, but rather data driven html.</p>
  <p>Surely someone else has encountered this and overcome. Please point me in the right direction.</p>