Laravel Livewire 3中Select2搜索框DOM重渲染后消失问题求助

问题出在Livewire的DOM更新机制上：当选择国家后，Livewire会重新渲染州的下拉选项，替换掉原来的<select>元素。但你只在页面加载时初始化了Select2，新替换的元素没有被Select2初始化，导致搜索框消失、Select2功能失效。

1. 调整属性绑定逻辑：移除国家下拉框的wire:model.live，改用Select2的change事件手动同步值到Livewire属性，避免自动DOM更新引发冲突。
2. 封装Select2初始化函数：把Select2的初始化逻辑封装成可复用函数，确保页面加载和Livewire DOM更新后都能重新初始化组件。
3. 监听Livewire更新事件：通过livewire:update事件，在Livewire完成DOM更新后重新初始化Select2，保证新渲染的下拉框正常启用搜索功能。

Blade模板 #

<div>
    <div class="col-12 col-md-6">
        <div class="ps-checkout__group">
            <label class="ps-checkout__label">Country *</label>
            <!-- 移除wire:model.live，改用Select2事件同步值 -->
            <select name="bCountry" class="form-control input-dropdown bCountry">
                <option value="">Select a country</option>
                @foreach(App\Models\SysCountry::where('status', 1)->get() as $item)
                    <option value="{{$item->id}}" {{ $bSelectedCountry == $item->id ? 'selected' : '' }}>{{$item->name}}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="col-12 col-md-6">
        <div class="ps-checkout__group">
            <label class="ps-checkout__label">State *</label>
            <select wire:model="billingStateId" class="form-control input-dropdown bState">
                <option value="">Select a State</option>
                @foreach($billingStateList as $item)
                    <option value="{{$item->id}}">{{$item->name}}</option>
                @endforeach
            </select>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // 封装Select2初始化函数，先销毁旧实例避免重复绑定
    function initSelect2() {
        $('.bCountry, .bState').select2('destroy').select2({
            placeholder: function() {
                return $(this).find('option[value=""]').text();
            },
            allowClear: true,
            width: '100%'
        });

        // 国家选择同步到Livewire
        $('.bCountry').on('change', function() {
            @this.set('bSelectedCountry', $(this).val());
        });

        // 州选择同步到Livewire
        $('.bState').on('change', function() {
            @this.set('billingStateId', $(this).val());
        });
    }

    // 页面加载时初始化
    $(document).ready(function() {
        initSelect2();
    });

    // Livewire更新DOM后重新初始化
    document.addEventListener('livewire:update', function() {
        initSelect2();
    });
</script>
@endpush

Livewire组件 #

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\SysState;
use App\Models\SysCity;

class YourComponentName extends Component
{
    public $bSelectedCountry;
    // 初始化空数组，避免视图渲染报错
    public $billingStateList = [], $billingCityList = [];  

    public function updatedbSelectedCountry($id){
        $this->billingStateList = SysState::where('country_id', $id)->get();
        // 切换国家后清空城市列表和选中的州
        $this->billingCityList = [];
        $this->reset('billingStateId');
    }

    public function updatedBillingStateId($id){
        $this->billingCityList = SysCity::where('state_id', $id)->get();
    }

    public function render()
    {
        return view('livewire.your-component-view');
    }
}

内容的提问来源于stack exchange，提问作者Rashed Zaman