Laravel Livewire多标签页下Select2多选组件切换后失效问题咨询

• Livewire的DOM diff机制：切换标签页时Livewire会重渲染对应标签页的DOM节点，Select2初始化时为原始<select>生成的额外样式、交互节点会被Livewire直接清除，重渲染后仅保留原始的下拉框元素，你写的一次性初始化脚本在重渲染后不会自动触发，自然会退化为普通下拉框。
• 初始化脚本执行时机错误：写在组件Blade内的普通<script>标签仅会在组件首次加载时执行，后续Livewire局部重渲染组件时不会重新运行；如果执行脚本时对应select元素还未挂载到DOM上，选择器无法匹配到元素，初始化也会失效。
• 标签页隐藏状态影响：如果包含Select2的标签页处于display:none的隐藏状态时触发初始化，Select2计算宽高、定位等属性会出错，也会导致初始化失败。

方法1：监听Livewire生命周期事件，动态执行初始化 #

利用Livewire提供的内置钩子，在组件每次加载、更新完成后自动触发Select2初始化，同时同步选择结果到Livewire属性：

document.addEventListener('livewire:load', function () {
    // 首次页面加载时初始化
    initSelect2();
    // 每次Livewire组件更新完成后重新初始化
    Livewire.hook('message.processed', (message, component) => {
        initSelect2();
    });
});

function initSelect2() {
    if ($.fn.select2) {
        // 先销毁已存在的Select2实例，避免重复初始化报错
        $('.select2').each(function() {
            if ($(this).hasClass('select2-hidden-accessible')) {
                $(this).select2('destroy');
            }
        });
        // 重新初始化，指定下拉框父容器为body，避免被标签页overflow属性截断
        $('.select2').select2({
            dropdownParent: $('body')
        });
        // 同步Select2的选择结果到Livewire绑定的属性
        $('.select2').on('change', function (e) {
            let bindAttr = $(this).attr('wire:model');
            if (bindAttr) {
                @this.set(bindAttr, $(this).val());
            }
        });
    }
}

注意：如果是多选择框，需要给<select>标签加multiple属性，同时对应的Livewire属性要声明为数组类型。

方法2：用wire:ignore标记跳过DOM diff #

如果Select2的选项不会随组件数据动态更新，可以直接给Select2的父容器加wire:ignore指令，让Livewire跳过对这部分DOM的比对和重渲染，Select2生成的节点不会被清除，无需反复初始化：

<div wire:ignore>
    <select class="select2" wire:model="selectedValue">
        <!-- 下拉选项内容 -->
    </select>
</div>

标签页切换适配 #

如果使用Bootstrap等第三方标签页组件，可以额外监听标签页切换完成事件，切换到对应标签页后再触发一次初始化，避免隐藏状态下初始化出错：

// 以Bootstrap 5标签页为例
document.addEventListener('shown.bs.tab', function (e) {
    initSelect2();
});

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