为什么 Livewire 组件无法在表格的 <td> 内工作？

Question

我有 users 表 和表行内，我使用 edit-user 组件来加载模式。

当我在 <td> 标签内使用此

edit-user

组件时，

wire:key

变得混乱，并且 edit-user 组件未在每一行中加载，并且分页和搜索功能中断。

但是当在

<td>

标签甚至

<tr>

中使用它时，它可以正常工作。

表格行：（编辑部分）

@foreach($users as $user)
<tr class="border hover:bg-gray-100/40 text-sm" wire:key="{{$user->id}}">
    <td class="py-4 px-1 text-center">
            <input wire:model.live="selectedUserIds" value="{{$user->id}}" type="checkbox" class="rounded p-2 shadow">
    </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  :key="'row-'.$user->id" :$user/>
                    


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

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

    </td>
</tr>

@endforeach

Answer 1

因为我在彼此内部使用了很多组件，似乎 livewire 面临着我无法解决的冲突，所以为表行添加编辑按钮的最佳方法是在页面中添加一个组件并使用它通过事件调度程序来编辑您的行！