Table with data injecting into wrong slots

#1

What seems to be the problem:

Hi, I am trying to render a list of areas, which contain a list of people (leads). When creating a new lead, an event is fired and the show component should fetch the new data and rerender. In my case it mixes up the view and puts the new entries into different places inside the list / table. I can’t find out why Livewire is not rerendering the whole list. Can you help? I tried to wire:key everything because I had DOM problems not finding parent wire:id before…

View:

 <div wire:key="list-of-areas">
    @foreach ($arealist as $area)
    <div wire:key="{{ 'listarea_' . $area->id }}">
        @if(count(This text will be hidden$area->leads) > 0)
            <div wire:key="{{ 'leads-list-area_' . $area->id }}">
                <h3 class="mt-5">{{ $area->title }} ({{ count($area->leads) }})</h3>
                
                <table class="table" wire:key="{{ 'leads-list-table_' . $area->id }}">
                    <thead class="thead-light">
                    <tr>
                        <th scope="col" class="bg-white border-top-0 pb-2 text-uppercase fs-14" style="width: 40%; color: #9FB3C8;">Name</th>
                        <th scope="col" class="bg-white border-top-0 pb-2 text-uppercase fs-14" style="width: 40%; color: #9FB3C8;">E-Mail</th>
                        <th scope="col" class="bg-white border-top-0 pb-2 text-uppercase fs-14" style="width: 20%; color: #9FB3C8;">Aktion</th>
                    </tr>
                    </thead>
                    <tbody wire:key="leads-table-body">
                        @foreach ($area->leads as $lead)
                            <tr wire:key="{{ 'lead_' . $lead->id }}">
                                <td class="pt-2 pb-2 fs-14">{{ $lead->fullname }}</td>
                                <td class="pt-2 pb-2 fs-14">{{ $lead->email }}</td>
                                <td class="pt-2 pb-2 fs-14">
                                    <a href="#" class="mr-1">
                                        <svg class="feather feather-aperture table-icon" fill="none" stroke="currentColor" stroke-width="2">
                                            <use xlink:href="/svg/feather-sprite.svg#edit-2"/>
                                        </svg>
                                    </a>
                                    @if($confirming===$lead->id)
                                        <a wire:click="delete({{ $lead->id }})" class="mr-1 text-danger">
                                            <svg class="feather feather-aperture table-icon" fill="none" stroke="currentColor" stroke-width="2">
                                                <use xlink:href="/svg/feather-sprite.svg#trash-2"/>
                                            </svg> Sicher?
                                        </a>
                                    @else
                                        <a wire:click="confirmDelete({{ $lead->id }})" class="mr-1 text-danger">
                                            <svg class="feather feather-aperture table-icon" fill="none" stroke="currentColor" stroke-width="2">
                                                <use xlink:href="/svg/feather-sprite.svg#trash-2"/>
                                            </svg>
                                        </a>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>    
    @endforeach
</div>

Are you using the latest version of Livewire:
yes - 1.0.9

Do you have any screenshots or code examples:

#2 
Cannot find parent element in DOM tree containing attribute: [wire:id].

Usually this is caused by Livewire's DOM-differ not being able to properly track changes.

Reference the following guide for common causes: https://laravel-livewire.com/docs/troubleshooting 

Referenced element:

<tr wire:key="lead_53">
                                <td class="pt-2 pb-2 fs-14"> </td>
                                <td class="pt-2 pb-2 fs-14">[email protected]</td>
                                <td class="pt-2 pb-2 fs-14">
                                    <a href="#" class="mr-1"></a></td></tr>