Bootstrap resetPage() livewire 后缺少下拉按钮 2.x
Bootstrap button dropdown missing after resetPage() livewire 2.x
早上好，
使用模态 bootstrap 4.x 更新数据后出现问题，下拉按钮一直消失。
我正在使用 laravel 7.x 和 livewire 2.x.
button not show for on or two data row
i 拆分模态组件和列表 tables 组件。
这是代码：
table 列出数据组件：
<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>
模态组件：
<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>
我的代码有什么问题吗？
请帮我。今天是我寻找解决方案的第三天
您是否尝试过使用 wire:key 指令跟踪根元素（在您的例子中是按钮）？？？
<div class="dropdown" wire:key="actions-button-{{ $item->id }}">
<button .....
???
否则，我建议尝试将 table 项的 td 创建为嵌套组件，例如
@forelse ($users_data as $item)
<tr>
@livewire('nested-item-td', ['item' => $item], key('nested-item-'.$item->id))
<.tr>
...
然后是 nested-item-td 组件 blade
<td>
.....
</td>
早上好， 使用模态 bootstrap 4.x 更新数据后出现问题，下拉按钮一直消失。 我正在使用 laravel 7.x 和 livewire 2.x.
button not show for on or two data row
i 拆分模态组件和列表 tables 组件。 这是代码：
table 列出数据组件：
<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>
模态组件：
<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>
我的代码有什么问题吗？ 请帮我。今天是我寻找解决方案的第三天
您是否尝试过使用 wire:key 指令跟踪根元素（在您的例子中是按钮）？？？
<div class="dropdown" wire:key="actions-button-{{ $item->id }}">
<button .....
???
否则，我建议尝试将 table 项的 td 创建为嵌套组件，例如
@forelse ($users_data as $item)
<tr>
@livewire('nested-item-td', ['item' => $item], key('nested-item-'.$item->id))
<.tr>
...
然后是 nested-item-td 组件 blade
<td>
.....
</td>