livewire中的foreach表现得很奇怪

Question

我在Livewire组件中的每一个下面都有两个表，我试图做的是，当我单击其中一个角色时，第二个表(权限表)应该用提供的角色权限刷新，第一次和第二次单击它可以很好地工作，但在那之后，权限表开始变长，一些元素开始尿布，这是我的角色控制器：

<?php
use Livewire\Component;
use Spatie\Permission\Models\Role;

class RolesTable extends Component
{   
    public $permissions;
    protected $listeners = ['refreash_permissions' => '$refresh'];
    public function render()
    {
        $roles = Role::all();
        return view('components.roles-table',compact(['roles' , $roles]));
    }
    public function get_permissions($role_id){
        $this->emitSelf('refreash_permissions');
        if($role = Role::findById($role_id)) {
            $role = Role::findById($role_id);
            $this->permissions = $role->permissions()->get();

        }

    }

}

这是我的观点：

<div class="">
    <div class="col-12 mb-3">
        <p class="mx-2 h3">Roles :</p>
        <table class="table table-hover table-inverse shadow-lg rounded-corners">
            <thead class="thead-inverse">
                <tr class="border-bottom">
                    <th class="mx-3 count">#</th>
                    <th class="mx-3  full-name" width="150px">Role Name</th>
                    <th class="mx-3 responsive-766" width="auto">Role Description</th>
                    <th class="mx-3 auctions d-flex justify-content-end mx-5"  width="auto">Actions</th>
                </tr>
                </thead>
                <tbody>
                    @foreach ($roles as $role)
                    <tr id="{{ $role->id }}" wire:click="get_permissions({{ $role->id }})" class="">
                        <td class="mx-3">{{ $loop->iteration }}</td>
                        <td class="">{{ $role->name }}</td>
                        <td id="{{ $role->description }}" class="description responsive-766">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus rem porro inventore nemo ad ratione aperiam minima necessitatibus excepturi provident sunt blanditiis quis tempore, pariatur dicta quidem nesciunt beatae, quia eaque? Ut .</td>
                        <td id='{{ $role->id }}' class="auction d-flex justify-content-end">
                            @can('view_roles')
                            <a id="{{ $role->id }}" class="role_profile btn btn-inv-info btn-sm m-1"><i class="fad fa-id-card fa-lg"></i></a>
                            @endcan
                            @can('edit_roles')
                            <a id="{{ $role->id }}" class="role_edit btn btn-inv-warning btn-sm m-1"><i class="fad fa-key fa-lg"></i></a>                         
                            @endcan
                            @can('delete_roles')
                            <a id="{{ $role->id }}" class="role_remove btn btn-inv-danger btn-sm m-1"><i class="fad fa-trash fa-lg"></i></a>
                            @endcan
                        </td>
                    </tr>
                    @endforeach
                </tbody>
        </table>
    </div>
    <div class="col-12 mb-3">
        <p class="mx-2 h3">Permissions :</p>
        <table class="table table-hover table-inverse shadow-lg rounded-corners">
            <thead class="thead-inverse">
                <tr class="border-bottom">
                    <th class="mx-3 count">#</th>
                    <th class="mx-3  full-name" width="150px">Permission Name</th>
                    <th class="mx-3 responsive-766" width="auto">Permission Description</th>
                    <th class="mx-3 auctions d-flex justify-content-end mx-5"  width="auto">Actions</th>
                </tr>
                </thead>
                <tbody>
                    @if ($permissions)
                    @foreach ($permissions as $permission)
                    <tr id="{{ $permission->id }}" class="">
                        <td class="mx-3">{{ $loop->iteration }}</td>
                        <td class="">{{ $permission->name }}</td>
                        <td id="{{ $permission->description }}" class="description responsive-766">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus rem porro inventore nemo ad ratione aperiam minima necessitatibus excepturi provident sunt blanditiis quis tempore, pariatur dicta quidem nesciunt beatae, quia eaque? Ut .</td>
                        <td id='{{ $permission->id }}' class="auction d-flex justify-content-end">
                            @can('view_roles')
                            <a id="{{ $permission->id }}" class="permission_profile btn btn-inv-info btn-sm m-1"><i class="fad fa-id-card fa-lg"></i></a>
                            @endcan
                            @can('edit_roles')
                            <a id="{{ $permission->id }}" class="permission_edit btn btn-inv-warning btn-sm m-1"><i class="fad fa-key fa-lg"></i></a>                         
                            @endcan
                            @can('delete_roles')
                            <a id="{{ $permission->id }}" class="permission_remove btn btn-inv-danger btn-sm m-1"><i class="fad fa-trash fa-lg"></i></a>
                            @endcan
                        </td>
                    </tr>
                    @endforeach   
                    @else
                    <tfoot>
                        <tr>
                            <td class="auto"></td>
                            <td class="auto"></td>
                            <td class="auto"></td>
                            <td width="auto d-flex justify-content-end text-center">there is nothing to show</td>
                            <td class="auto"></td>
                            <td class="auto"></td>
                            <td class="auto"></td>
                        </tr>
                    </tfoot>   
                    @endif
                    
                </tbody>
        </table>
</div>
</div>

这也是一些屏幕截图：this before any click this after one or two clicks之后，在任何点击，表格变成了这个链接：this when the thing become super weird任何建议我将不胜感激。

Answer 1

在你的render方法中，你有一个紧凑的数组：

public function render()
{
    $roles = Role::all();
    return view('components.roles-table',compact(['roles' , $roles]));
}

理想情况下，您应该只将compact('roles')传递给该方法。

其次，您在get_permissions方法中执行了以下操作

public function get_permissions($role_id)
{
    $this->emitSelf('refreash_permissions');
    if($role = Role::findById($role_id)) {
        $role = Role::findById($role_id);
        $this->permissions = $role->permissions()->get();
    }
}

您正在访问数据库两次。我会这样做：

public function get_permissions($role_id)
{
    $role = Role::findOrFail($role_id);
    $this->permissions = $role->permissions;
    $this->emitSelf('refreash_permissions');
}

在更新值之前，您将发出refreash_permissions。

关于正在发生的事情：

首先，您没有为Livewire提供对行的引用，这会导致diff出现问题。https://laravel-livewire.com/docs/2.x/troubleshooting我建议为该行分配一个wire:key引用，它通常是权限ID，但在本例中，您将替换整个部分，因此应该使用$loop->index()值，如果Livewire在页面上有多个元素，则可以使用字符串作为其前缀，例如'permission.' . $loop->index()，以告知Livewire此处引用的元素。

其次，我可能会重命名类rolePermissions上的permissions参数，以防止compact()方法的变量污染，因为您传递的是带有数组嵌套的数组。