我正在使用 Select2，在第一页加载时它工作正常，并且我能够设置 livewire 属性，但是在使用wire:navigate 导航时我失去了样式。我对此做了一些研究，推荐的方法是使用 livewire:naviated 事件重新初始化，但是重新初始化后如何获取 livewire 属性？
我的合作伙伴列表视图
<div>
@include('layouts.navbars.auth.topnav', ['title' => 'List Partners'])
<div class="container-fluid py-4">
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-header pb-0">
<h6>Filters</h6>
</div>
<div class="card-body">
<div class="row p-3 my-3">
<div class="col-md-3">
<div wire:ignore class="form-group">
<label for="status_id" class="form-label">Filter by status</label>
<select id="status_id" class="form-control select2 filter"
wire:change="$dispatch('filter')" wire:model="status_id" required>
<option value="all">All</option>
@foreach ($statuses as $status)
<option value="{{ $status->id }}">{{ $status->status_name }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div wire:ignore class="form-group">
<label for="office_id" class="form-label">Filter by office</label>
<select id="office_id" class="form-control select2 filter"
wire:change="$dispatch('filter')" wire:model="office_id" required>
<option value="all">All</option>
@foreach ($offices as $office)
<option value="{{ $office->id }}">{{ $office->name }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div wire:ignore class="form-group">
<label for="partner_type" class="form-label">Filter by partner type</label>
<select id="partner_type" class="form-control select2 filter"
wire:change="$dispatch('filter')" wire:model="partner_type"
required>
<option value="all">All</option>
<option value="individual">Individual</option>
<option value="non-individual">Non Individual</option>
</select>
</div>
</div>
<div class="col-md-3">
<div wire:ignore class="form-group">
<label for="vehicle_id" class="form-label">Filter by vehicle</label>
<select id="vehicle_id" class="form-control select2 filter"
wire:change="$dispatch('filter')" wire:model="vehicle_id" required>
<option value="all">All</option>
@foreach ($vehicles as $vehicle)
<option value="{{ $vehicle->id }}">{{ $vehicle->reg_number }}</option>
@endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="">Search</label>
<div class="input-group">
<input type="text" id="search" class="form-control filter"
wire:keyup.debounce="$dispatch('filter')" wire:model="search"
placeholder="Search by name, email.."
value="{{ $request->search ?? '' }}">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="card-header pb-0">
<div class="d-flex align-items-center">
<h6>Clients Table</h6>
@can('clients.create')
<a href="{{ route('clients.create') }}" wire:navigate
class="btn ms-auto btn-sm bg-gradient-primary"> <i
class="fa fa-plus-square me-1" aria-hidden="true"></i> Add Client
</a>
@endcan
</div>
</div>
<div class="card-body px-0 pt-0 pb-2">
<div class="table-responsive p-0">
<table class="table align-items-center mb-0">
<thead>
<tr>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
Partner
</th>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
Type
</th>
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
Office
</th>
<th
class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
ID Number
</th>
<th
class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
Status
</th>
<th
class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
Action
</th>
<th class="text-secondary opacity-7"></th>
</tr>
</thead>
<tbody>
<tr>
<td style="border:0px;" colspan="6" class="text-center text-success">
<div wire:loading class="spinner-border text-center mt-2" role="status">
<span class="sr-only">Loading...</span>
</div>
</td>
</tr>
@forelse ($partners as $partner)
<tr wire:loading.remove>
<td>
<div class="d-flex px-2 py-1">
{{-- <div>
<img src="/img/team-2.jpg" class="avatar avatar-sm me-3" alt="user1">
</div> --}}
<div class="d-flex flex-column justify-content-center">
<h6 class="mb-0 text-sm">{{ $partner->first_name }}
{{ $partner->last_name }}</h6>
<p class="text-xs text-secondary mb-0">{{ $partner->user->email }}
</p>
<p class="text-xs text-secondary mb-0">
{{ $partner->user->phone_number }}</p>
</div>
</div>
</td>
<td>
<p class="text-xs font-weight-bold mb-0 text-uppercase">
{{ $partner->partner_type }}</p>
</td>
<td>
<p class="text-xs font-weight-bold mb-0">{{ empty($partner->office) ? 'N/A' :$partner->office->name }}</p>
</td>
<td class="align-middle ">
<span
class="text-secondary text-xs font-weight-bold">{{ $partner->id_number }}</span>
</td>
<td class="align-middle text-center text-sm">
@switch($partner->status->status_name)
@case('Active')
<span class="badge badge-pill bg-gradient-success">
{{ $partner->status->status_name }}
</span>
@break
@case('Terminated')
<span class="badge badge-pill bg-gradient-danger">
{{ $partner->status->status_name }}
</span>
@break
@case('Unverified')
<span class="badge badge-pill bg-gradient-primary">
{{ $partner->status->status_name }}
</span>
@break
@default
<span class="badge badge-pill bg-gradient-danger">
{{ $partner->status->status_name }}
</span>
@endswitch
</td>
<td class="align-middle">
<div class="d-flex flex-row justify-content-center">
<a href="{{ route('partners.edit', ['partner' => $partner->id]) }}"
class="text-secondary font-weight-bold text-xs mx-2"
data-bs-toggle="tooltip" title="Edit partner">
<i class="fa fa-pencil-alt" aria-hidden="true"></i> Edit
</a>
<a href="{{ route('partners.show', ['partner' => $partner->id]) }}"
class="text-primary font-weight-bold text-xs mx-2"
data-bs-toggle="tooltip" title="View vehicle">
<i class="fa fa-eye" aria-hidden="true"></i> View
</a>
</div>
</td>
</tr>
@empty
<tr>
<td colspan="6" class="text-center text-danger">No available partners</td>
</tr>
@endforelse
</tbody>
</table>
<div class="mt-4 px-2 w-100 pb-4">
{{ $partners->onEachSide(5)->links() }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@push('js')
<script>
$(document).ready(function () {
$("#status_id").select2();
$("#status_id").change(function (e) {
@this.set('status_id', $(this).val(), true)
})
$("#office_id").select2();
$("#office_id").change(function (e) {
@this.set('office_id', $(this).val(), true)
})
$("#vehicle_id").select2();
$("#vehicle_id").change(function (e) {
@this.set('vehicle_id', $(this).val(), true)
})
$("#partner_type").select2();
$("#partner_type").change(function (e) {
@this.set('partner_type', $(this).val(), true)
})
});
</script>
@endpush
我的班级
<?php
namespace App\Livewire\Partners;
use App\Models\Office;
use App\Models\Partner;
use App\Models\Status;
use App\Models\Vehicle;
use Livewire\Attributes\On;
use Livewire\Component;
use Livewire\WithPagination;
class ListPartners extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public $search;
public $office_id;
public $vehicle_id;
public $status_id;
public $partner_type;
public $statuses;
public $offices;
public $vehicles;
public function mount()
{
$this->statuses = Status::all();
$this->offices = Office::all();
$this->vehicles = Vehicle::all();
}
#[On('filter')]
public function render()
{
$partners = Partner::orderBy('created_at', 'desc');
if (!empty($this->search)) {
$partners->where(function ($p) {
$p->where("first_name", "like", "%" . $this->search . "%")
->orWhere('last_name', 'like', "%$this->search%")
->orWhereHas('user', function ($q) {
$q->where('email', 'like', "%$this->search%")
->orWhere('phone_number', 'like', "%$this->search%");
});
});
}
if (!empty($this->office_id) && $this->office_id !== 'all') {
$partners->where('office_id', $this->office_id);
}
if (!empty($this->status_id) && $this->status_id !== 'all') {
$partners->where('status_id', $this->status_id);
}
if (!empty($this->partner_type) && $this->partner_type !== 'all') {
$partners->where('partner_type', $this->partner_type);
}
if (!empty($this->vehicle_id) && $this->vehicle_id !== 'all') {
$partners->whereHas('currentVehicles', function ($query) {
$query->where('vehicle_id', $this->vehicle_id);
});
}
$partners = $partners->with(['user','status','subUsers','office','currentVehicles']);
return view('livewire.partners.list-partners', ['partners' => $partners->paginate(10)])
->extends('layouts.app')
->section('content');
}
}
重新初始化选择 2
<script data-navigate-once>
document.addEventListener('livewire:navigated', () => {
console.log('test');
$("#status_id").select2()
$("#office_id").select2()
$("#vehicle_id").select2()
$("#partner_type").select2()
$("#client_type").select2()
$("#vehicle_class_id").select2()
$("#fuel_type_id").select2()
$("#vehicle_type_id").select2()
})
</script>
$("#status_id").select2();
$("#status_id").change(function (e) {
Livewire.dispatch('set-partner-filter-status-id',{ status_id : $(this).val()});
})