Laravel8下Livewire结合Select2实现动态下拉功能失效求助

核心问题点 #

• 法院选择框未添加id="court"属性，JS中绑定的#court change事件无法命中对应DOM，选中值无法同步到Livewire
• wire:ignore包裹下拉框容器后，Livewire更新$courts数据时不会刷新下拉框的option节点，Select2无法加载新选项
• 未监听Livewire的数据集更新事件，$courts变更后没有重新初始化Select2实例，旧实例依旧绑定旧选项
• Livewire组件未触发数据更新通知，前端无法感知$courts已经刷新

分步修正代码 #

1. 修正Blade模板代码 #

给法院下拉框添加id属性，代码如下：

{{$selectedType}}
<div class="row g-3 mb-3">
<div class="col-md">
  <div class="form-floating" wire:ignore>
    <select class="form-select" id="type" wire:model="selectedType" required>
        <option value="">Select Court Type</option>
        @foreach($types as $type)
        <option value="{{$type->id}}">{{$type->court_type_name}}</option>
        @endforeach
    </select>
    <label for="floatingInputGrid">Type</label>
  </div>
</div>

@if (!is_null($courts))
<div class="col-md">
  <div class="form-floating" wire:ignore>
    <!-- 新增id="court"属性 -->
    <select class="form-select" id="court" wire:model="selectedCourt" required>
        <option value="">Select Court Location</option>
        @foreach($courts as $court)
        <option value="{{$court->id}}">{{$court->court_name}}, {{$court->province}}</option>
        @endforeach
    </select>
    <label for="floatingInputGrid">Court Location</label>
  </div>
</div>
@endif

</div>

2. 修正Livewire组件代码 #

首先确保组件顶部已经声明public属性$courts, $selectedType, $selectedCourt, $clerks，然后在updatedSelectedType方法末尾添加事件触发，通知前端数据已更新：

// 组件顶部必须声明的公共属性，漏写需补上
public $selectedType = null;
public $selectedCourt = null;
public $courts = null;
public $clerks = null;

public function render()
{
    $types = Type::All();
    $periods = Period::All();
    return view('livewire.collection.add', compact('types', 'periods'));
}

public function updatedSelectedType($court_id)
{
    $this->courts = Court::where('court_type', $court_id)->orderBy('court_name')->get();
    // 触发前端事件，告知courts数据已更新（Laravel8对应Livewire2.x用emit）
    $this->emit('courtsUpdated');
    // 切换类型后清空已选法院
    $this->selectedCourt = null;
}

public function updatedSelectedCourt($clerk_id)
{
    $this->clerks = Clerk::where('court', $clerk_id)->get();
}

3. 修正Select2初始化代码 #

添加Livewire事件监听，数据更新后销毁旧Select2实例，重新初始化加载新选项：

<script>
$(document).ready(function () {
    // 初始化类型选择框
    $('#type').select2();
    $('#type').on('change', function (e) {
        var data = $('#type').select2("val");
        @this.set('selectedType', data);
    });

    // 初始化法院选择框
    initCourtSelect2();

    // 监听courts更新事件，重新初始化法院选择框
    Livewire.on('courtsUpdated', function() {
        // 先销毁旧实例
        $('#court').select2('destroy');
        // 重新初始化加载新option
        initCourtSelect2();
    });

    // 封装法院选择框初始化逻辑
    function initCourtSelect2() {
        if ($('#court').length) {
            $('#court').select2();
            $('#court').on('change', function (e) {
                var data = $('#court').select2("val");
                @this.set('selectedCourt', data);
            });
        }
    }
});
</script>

验证逻辑 #

修改完成后刷新页面，选择法院类型后，会自动触发updatedSelectedType方法刷新$courts数据，前端收到事件通知后重新渲染法院Select2下拉框，即可正常加载对应选项完成联动。

内容的提问来源于stack exchange，提问作者Harvz Mendoza