使用wire:navigate后如何重新初始化Select2并同步Livewire属性？

首次加载页面时，Select2组件正常渲染并能同步Livewire组件属性，但通过wire:navigate进行页面导航后，Select2样式丢失；重新初始化Select2后，无法同步Livewire组件的现有属性值。

1. 统一Select2初始化与属性同步逻辑 #

将初始化逻辑迁移到livewire:navigated事件中，同时处理样式初始化、属性值同步和变更事件绑定三个核心环节，避免重复代码并确保导航后的状态一致性。

2. 修改视图中的JS代码 #

替换原有的@push('js')代码块和独立的livewire:navigated脚本，使用以下统一逻辑：

@push('js')
<script data-navigate-once>
document.addEventListener('livewire:navigated', () => {
    // 封装Select2初始化与同步的通用函数
    function initAndSyncSelect(selector, propertyName) {
        const $select = $(selector);
        
        // 销毁已存在的Select2实例，避免重复初始化冲突
        if ($select.data('select2')) {
            $select.select2('destroy');
        }
        
        // 初始化Select2
        $select.select2();
        
        // 获取Livewire组件实例（需确保组件有明确标识，这里用组件类名作为参考）
        const component = Livewire.find('livewire.partners.list-partners');
        
        // 将Select2的选中值同步为Livewire组件当前的属性值
        $select.val(component.get(propertyName)).trigger('change.select2');
        
        // 绑定变更事件，同步Select2值到Livewire组件属性
        $select.on('change', function() {
            component.set(propertyName, $(this).val(), true);
        });
    }

    // 初始化所有需要的Select2组件
    initAndSyncSelect("#status_id", "status_id");
    initAndSyncSelect("#office_id", "office_id");
    initAndSyncSelect("#vehicle_id", "vehicle_id");
    initAndSyncSelect("#partner_type", "partner_type");
    
    // 其他页面的Select2可按相同格式添加
    // initAndSyncSelect("#client_type", "client_type");
    // initAndSyncSelect("#vehicle_class_id", "vehicle_class_id");
});
</script>
@endpush

3. 优化组件类默认值（可选） #

在组件的mount方法中设置筛选属性的默认值，确保初始状态与下拉选项的默认值匹配：

public function mount()
{
    $this->statuses = Status::all();
    $this->offices = Office::all();
    $this->vehicles = Vehicle::all();
    
    // 设置默认筛选值，与下拉选项的"all"保持一致
    $this->status_id = 'all';
    $this->office_id = 'all';
    $this->vehicle_id = 'all';
    $this->partner_type = 'all';
}

关键说明 #

• 使用Livewire.find()精准定位组件实例，避免全局歧义；若组件无明确标识，可使用Livewire.getByIndex(0)获取当前页面第一个Livewire组件。
• 每次初始化前销毁旧的Select2实例，防止重复绑定事件导致的多次触发问题。
• 通过component.get(propertyName)获取组件当前属性值，确保Select2初始化后显示的是Livewire的最新状态。

内容的提问来源于stack exchange，提问作者KEVIN AMAYI