在循环中嵌套 Livewire 组件会导致未捕获快照错误

Question

在 Livewire 中，我有用户表，并在该表的循环内放置了 user-row 组件。另见

添加了一些操作，例如编辑用户，打开一个模式以在下拉列表中编辑用户数据，然后我将模式和模式按钮放入另一个名为 userEditModal 的组件中。

之后，我将模态组件添加到用户行组件中，在某些事件之后，我遇到了令人困惑的错误，例如在对列进行多次排序或搜索多次之后，我无法打开操作下拉列表等。

在这种情况下，Livewire 显示多个如下错误：

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

用户表刀片（父组件）：

<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>

用户行组件（循环嵌套在用户表中，注意第44行编辑部分）：

<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>

编辑用户模态组件（嵌套在行组件中）：

<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>

我尝试向组件添加wire:key，这仅在删除edit user modal组件时才有效。

Answer 1

太傻了，我的代码在Users Table Blade（父组件）文件中存在错误，

这应该改变：

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

对此：

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

我错过了 Blade 中的 PHP 变量

{{ ... }}

！