Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Nesting Livewire component in loop causes uncaught snapshot Error

In Livewire I have users table and have put a user-row component inside loop for this table. also see this image

Added some actions like Edit User, that opens a modal to edit user data in a dropdown then I put modal and modal button inside another component called userEditModal.

After that I added modal component to user row component I’m getting confusing errors after some events for example after sorting columns for several times or searching several times, I can’t open the actions dropdown and etc.

In this situation Livewire shows multiple errors like these:

Uncaught Snapshot missing on Livewire component with id: rTfkHTjFfzKmW2Nc6msi

Uncaught Snapshot missing on Livewire component with id: Iqxj9J7ypOeiOyMCGTsM

livewire.js?id=5d8beb2e:4420 Uncaught Snapshot missing on Livewire component with id: w4pA4mbd5Xjx0PCN1qgq

Users Table Blade (parent component):

<x-tables.elements.authentication.users.head/>

<!-- loading and table -->
<div class="relative">
    <!-- table -->
    <div>
        <table class="w-full border-collpase dark:text-white">
            <tr class="bg-gray-100 dark:bg-gray-800 font-bold border">
                <td class="py-4 text-center">
                    <x-tables.elements.authentication.users.selectall/>
                </td>
                <td class="py-4 px-2">
                    <x-tables.elements.sort column="mobile" :$sortCol :$sortAsc>
                    تلفن همراه
                    </x-tables.elements.sort>
                </td>
                <td class="py-4 px-2">
                    <x-tables.elements.sort column="email" :$sortCol :$sortAsc>
                    ایمیل
                    </x-tables.elements.sort>
                </td>
                <td class="py-4 px-2">
                    <x-tables.elements.sort column="name" :$sortCol :$sortAsc>
                    نام
                    </x-tables.elements.sort>
                </td>
                <td class="py-4 px-2 text-center">
                    <x-tables.elements.sort column="status" :$sortCol :$sortAsc>
                    وضعیت
                    </x-tables.elements.sort>
                </td>
                <td>
                    
                </td>
            </tr>
            
            <!-- loop starts here -->
            @foreach($users as $user)
                <x-tables.elements.authentication.users.row :key="$user->id" :$user/>
            @endforeach
            
        </table>
    </div>
    <!-- loading -->
    <div wire:loading.flex wire:target="search, nextPage, previousPage, bulkActive, bulkDeactive, activate, sortBy, applySorting, applySearch, flushSession" class="flex items-center justify-center absolute inset-0 bg-white/50 text-rahkar-blue">
        <x-icon.spinner :size="8"/>
    </div>
</div>

<!-- pagination links -->
<div class="w-full">
        {{$users->links()}}
</div>

User Row Component (nested in users table in loop, pay attention to line 44 edit section):

<div wire:key="$user->id">
    <tr class="border hover:bg-gray-100/40 text-sm">
    <td class="py-4 px-1 text-center">
            <input wire:key="{{-1*$user->id**-1}}" wire:model.live="selectedUserIds" value="{{$user->id}}" type="checkbox" class="rounded p-2 shadow">
    </td>
    <td class="py-4 px-2">
        {{$user->mobile}}
    </td>
    <td class="py-4 px-2">
        {{$user->email}}
    </td>
    <td class="py-4 px-2">
        {{$user->name}}
        
    </td>
    <td class="py-4 px-2">
        @switch ($user->is_active)
            @case(1)
                <span class="px-1 bg-green-500 text-white rounded">فعال</span>
                @break
            @case(0)
                <span class="px-1 bg-red-500 text-white rounded">غیرفعال</span>
                @break
        @endswitch
    </td>
    <td class="whitespace-nowarp px-2 text-sm">
        <div class="flex items-center justify-end" x-data="{edit_modal: false }">
            <x-menu>
                <x-menu.button class="hover:bg-gray-200 hover:rounded">
                    <x-icon.ellipsis-horizontal :size="7"/>
                </x-menu.button>

                <x-menu.items>

                    @if($user->id !== session('user_id'))
                    <x-menu.item wire:click="activate({{$user->id}})">
                        {{$user->is_active === 1 ? 'غیرفعال‌سازی' : 'فعال‌سازی'}}
                    </x-menu.item>
                    @endif


                    <!-- edit -->
                    
                    <livewire:tables.authentication.users.edit-user :$user @useredited="$refresh" :key="$user->id * -1">
                    


                    <x-dialog>
                        <x-dialog.open>
                            <x-menu.item>
                                ابطال سشن‌ها
                            </x-menu.item>
                        </x-dialog.open>
                        <x-dialog.panel>
                            <div>
                                <div>
                                    <h2>آیا از لغو تمام نشست‌های کاربر <span class="font-bold">{{$user->name}}</span> اطمینان دارید ؟</h2>
                                </div>
                            </div>

                            <x-dialog.footer>
                              <button x-on:click="await $wire.flushSession({{$user->id}}), $dialog.close()" class="rounded-lg border bg-rahkar-blue hover:bg-rahkar-blue-second text-white px-6 py-3">
                                بله؛ اطمینان دارم
                              </button>

                                <x-dialog.close>
                                    <button class="rounded-lg border bg-red-500 hover:bg-red-700 text-white px-6 py-3">
                                    خیر
                                    </button>
                                </x-dialog.close>

                            </x-dialog.footer>
                        </x-dialog.panel>

                    </x-dialog>

                    @if($user->id !== session('user_id'))
                    <x-menu.item>
                        سطح دسترسی
                    </x-menu.item>
                    @endif

                    <x-menu.item x-on:click=" edit_modal= true ">
                        لاگ
                    </x-menu.item>

                </x-menu.items>
            </x-menu>
        </div>

    </td>
</tr>
</div>

Edit User Modal Component (nested in row component):

<div>
   <!-- create new user modal and button -->
   <x-dialog wire:model="show">
                    <x-dialog.open>
                        <x-menu.item>
                        ویرایش
                        </x-menu.item>

                    </x-dialog.open>
                    <x-dialog.panel>

                        <div class="flex items-center pb-4">
                            <span class="text-lg">ویرایش کاربر</span>
                        </div>

                        <form wire:submit="update" class="grid gap-2">

                            <div class="relative flex items-center">
                                <div class="absolute right-2 flex gap-2">
                                <x-icon.at-symbol size="6"/>
                                ایمیل
                                </div>
                                <input wire:model.live.debounce.250ms="form.email" type="text" placeholder="[email protected]" class="rounded-lg border-gray-200 px-6 py-3 pr-20 ltr w-full" required>
                            </div>

                            @error('form.email')
                            <div class="w-full">
                                <div>
                                    {{$message}}
                                </div>
                            </div>
                            @enderror

                            <div class="relative flex items-center">
                                <div class="absolute right-2 flex gap-2">
                                <x-icon.mobile size="6"/>
                                موبایل
                                </div>
                                <input wire:model.live.debounce.250ms="form.mobile" type="text" x-mask="09999999999" placeholder="09123334455" class="rounded-lg border-gray-200 border px-6 py-3 pr-20 ltr w-full">
                            </div>

                            @error('form.mobile')
                            <div class="w-full">
                                <div>
                                    {{$message}}
                                </div>
                            </div>
                            @enderror

                            <div class="relative flex items-center">
                                <div class="absolute right-2 flex gap-2">
                                <x-icon.mobile size="6"/>
                                نام
                                </div>
                                <input wire:model="form.name" type="text" placeholder="علیرضا طباطبائی" class="rounded-lg border-gray-200 border px-6 py-3 pr-20 ltr w-full">
                            </div>

                            @error('form.name')
                            <div class="w-full">
                                <div>
                                    {{$message}}
                                </div>
                            </div>
                            @enderror
                            
                            <x-dialog.footer>
                                <button type="submit" @class(['cursor-not-allowed opacity-75 pointer-events-none    ' => $errors->any(), 'rounded-lg border bg-rahkar-blue hover:bg-rahkar-blue-second text-white px-6 py-3'])>
                                اعمال تغییرات
                                </button>

                                <x-dialog.close>
                                    <button type="button" class="rounded-lg border bg-red-500 hover:bg-red-700 text-white px-6 py-3">
                                    انصراف
                                    </button>
                                </x-dialog.close>
                                
                            </x-dialog.footer>
                        </form>
                    </x-dialog.panel>
                </x-dialog>
</div>

I have tried adding wire:key to components, this only works when edit user modal component is deleted.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So Silly, there was a mistake in my codes in Users Table Blade (parent component) file,

    This should be changed:

    @foreach($users as $user)
     <x-tables.elements.authentication.users.row :key="$user->id" :$user/>
@endforeach

    to this:

    @foreach($users as $user)
    <x-tables.elements.authentication.users.row :key="{{$user->id}}" :$user/>
 @endforeach

    I missed {{ ... }} for PHP variable in Blade !


  2. 0

    I did a test and when providing a fixed string – e.g. using {{ }} – the colon before key must be removed otherwise an erro will be returned.
    At this point I advise to use the colon and remove the curly braces, as per the documenation.

    In the child component you need to remove wire:key as this is what causes the "Uncaught Snapshot missing …" error

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search