foreach in livewire acting weird

  foreach, html, laravel, laravel-livewire, php

I have two tables under each over in Livewire component,
what I’m trying to do is when I click on one of the roles
the second table (permissions table) should refresh with the provided role permissions,
one the first and second click it works perfectly but after that the permission table start become longer and some element start diaper,this is my Role controller:

<?php
use LivewireComponent;
use SpatiePermissionModelsRole;

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();

        }

    }

}

and this is my view:

<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 is also some screenshots:
this before any click
this after one or two clicks
after that in any click, the table becomes link this:
this when the thing become super weird
any advice I will be thankful.

Source: Ask PHP

LEAVE A COMMENT