Good morning, i have a problem after updated data with modal bootstrap 4.x, the dropdown button keeps disappeared. I'm using laravel 7.x and livewire 2.x.
button not show for on or two data row
i split the modal component and the list tables component. Here's the code:
table list data components:
<div class="p-dashboard">
<div wire:ignore>
@include('template.components.sidebar-admin')
</div>
<div class="p-dashboard-container">
<div wire:ignore>
@include('template.components.navbar-admin')
</div>
<div class="p-dashboard-content">
<div class="card-box">
<div class="card-box-header pt-0">
<div class="row align-items-end">
<div class="col">
<div class="form-group mb-0">
<div class="input-group ">
<div class="input-group-append ml-0">
<span class="input-group-text"><i class="bi bi-search"></i></span>
</div>
<input type="text" wire:model.debounce.300ms="search" class="form-control" placeholder="Search" />
</div>
</div>
</div>
<div class="col-2">
<div class="form-group mb-0">
<label for="">Start Date</label>
<input type="date" wire:model.debounce.300ms="dateStart" class="form-control" placeholder="Search" />
</div>
</div>
<div class="col-2">
<div class="form-group mb-0">
<label for="">End Date</label>
<input type="date" wire:model.debounce.300ms="dateEnd" class="form-control" placeholder="Search" />
</div>
</div>
<div class="col-2">
<div class="form-group mb-0">
<label for="">Level</label>
<select class="form-control" wire:model="filterLevel" name="" id="">
<option value="">Select Level</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
</div>
<div wire:ignore.self class="card-box-body">
<div class="table-hold">
<table class="table table-striped">
<thead>
<tr>
<th wire:click="sortBy('name')" style="cursor:pointer;text-align:center;">
Full Name
@include('components.sort-icon',['field' => 'name'])
</th>
<th wire:click="sortBy('email')" style="cursor:pointer;text-align:center;">
Email
@include('components.sort-icon',['field' => 'email'])
</th>
<th wire:click="sortBy('telepon')" style="cursor:pointer;text-align:center;">
Phone Number
@include('components.sort-icon',['field' => 'telepon'])
</th>
<th wire:click="sortBy('created_at')" style="cursor:pointer;text-align:center;">
Date Joined
@include('components.sort-icon',['field' => 'created_at'])
</th>
<th wire:click="sortBy('level')" style="cursor:pointer;text-align:center;">
Level
@include('components.sort-icon',['field' => 'level'])
</th>
<th wire:click="sortBy('status')" style="cursor:pointer;text-align:center;">
Status
@include('components.sort-icon',['field' => 'status'])
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
@forelse ($users_data as $item)
<tr>
<td>
@if(isset($item->picture))
<img class="avatar rounded-circle" src="{{ asset('storage/'.$item->picture) }}" alt="{{ $item->name }}">
@else
<img class="avatar rounded-circle" src="https://pbs.twimg.com/media/BduTxWnIUAAKT_5.jpg" />
@endif
{{ $item->name }}
</td>
<td>{{ $item->email }}</td>
<td>
@if(isset($item->telepon))
+{{ $item->telepon }}
@else
-
@endif
</td>
<td>{{ date('d M Y', strtotime($item->created_at)) }}</td>
<td>{{ $item->level }}</td>
<td>
@if ($item->status == 13)
<span class="badge badge-pill badge-green-soft px-3 py-2 font-weight-normal">
<i class="bi bi-x-circle-fill mr-1"></i>
Ban
</span>
@elseif ($item->status == 666)
<span class="badge badge-pill badge-red px-3 py-2 font-weight-normal">
<i class="bi bi-stop-fill mr-1"></i>
Permanent Ban
</span>
@else
<span class="badge badge-pill badge-green px-3 py-2 font-weight-normal">
<i class="bi bi-check-circle-fill mr-1"></i>
Active
</span>
@endif
</td>
<td>
<div class="dropdown">
<button class="dropdown-toggle btn btn-link" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="bi bi-gear-fill text-muted"></i>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
@if($item->status == 13 || $item->status == 666)
<a class="dropdown-item" wire:click="unbanUser({{ $item->id }})">Unban</a>
@else
<a class="dropdown-item" wire:click="banUser({{ $item->id }})">Ban</a>
@endif
<a class="dropdown-item" wire:click="deleteUser({{ $item->id }})">Delete</a>
<a class="dropdown-item" wire:click="banPermanentUser({{ $item->id }})">Permanent Ban</a>
</div>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="7" align="center">
<b>Belum ada data users.</b>
</td>
</tr>
@endforelse
<tr>
<td colspan="7">
{{ $users_data->links('components.custom-paging') }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
modal component:
<div wire:ignore.self class="modal fade" id="DeleteUser" tabindex="-1" aria-labelledby="AddCurrencyLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<div class="modal-body py-md-5 px-md-4">
<button type="button" class="close" wire:click="cancelModal">
<span aria-hidden="true"><i class="bi bi-x"></i></span>
</button>
<div class="heading flex align-items-center mb-5">
<div class="pr-3">
<div class="icons">
<i class="bi bi-text-paragraph"></i>
</div>
</div>
<div>
<h4>Delete User</h4>
</div>
</div>
@if(isset($currencies['currency_name']))
Apakah Anda yakin ingin menghapus data {{ $users['name'] }} ini?
@else
Apakah Anda yakin ingin menghapus data ini?
@endif
<div class="row pt-5">
<div class="col">
<button class="btn btn-outline-secondary btn-block" type="button" wire:click="cancelModal">Cancel</button>
</div>
<div class="col">
@if(isset($users_id))
<button wire:click="deleteData" class="btn btn-primary btn-block" type="button">Submit</button>
@endif
</div>
</div>
</div>
</div>
</div>
Are there anything wrong with my code? Please help me. Today is the third day i search for the solutions
did you tried tracking the root element (in your case the button) with the wire:key directive???
<div class="dropdown" wire:key="actions-button-{{ $item->id }}">
<button .....
???
Otherwise, I suggest try to create the table items's td as nested components like
@forelse ($users_data as $item)
<tr>
@livewire('nested-item-td', ['item' => $item], key('nested-item-'.$item->id))
<.tr>
...
and then the nested-item-td component blade
<td>
.....
</td>