Livewire 3懒加载组件下日期/月份选择器无法触发求助

问题场景 #

• 启用Livewire 3的lazy组件（<livewire:report lazy />）后，页面中的月份选择器（month_picker）和日期选择器（kt_datepicker）无法触发交互
• 不启用lazy时，手动刷新页面或通过wire:navigate切换页面，选择器均能正常工作
• 问题根源：Livewire加载lazy组件时会先渲染占位符，而初始的jQuery(document).ready()仅执行一次，懒加载后新增的DOM元素未被初始化日期选择器插件

解决方案 #

核心思路是利用Livewire的morph.added钩子，在懒加载的DOM元素被插入页面后，重新初始化对应的选择器插件。

1. 重构选择器初始化逻辑 #

将原有的初始化代码拆分为可复用的独立方法，方便后续在懒加载场景下调用：

var KTBootstrapDatepicker = function() {
    var arrows;
    if (KTUtil.isRTL()) {
        arrows = {
            leftArrow: '<i class="la la-angle-right"></i>',
            rightArrow: '<i class="la la-angle-left"></i>'
        }
    } else {
        arrows = {
            leftArrow: '<i class="la la-angle-left"></i>',
            rightArrow: '<i class="la la-angle-right"></i>'
        }
    }

    // 初始化单个日期选择器
    var initDatePicker = function(el) {
        $(el).datepicker({
            rtl: KTUtil.isRTL(),
            todayHighlight: true,
            orientation: "bottom left",
            templates: arrows,
            autoclose: true,
            format: "dd-mm-yyyy"
        }).on("changeDate", function(e){
            @this.set('bulan', e.format());
        });
    }

    // 初始化单个月份选择器
    var initMonthPicker = function(el) {
        $(el).datepicker({
            rtl: KTUtil.isRTL(),
            todayHighlight: true,
            orientation: "bottom left",
            templates: arrows,
            autoclose: true,
            format: "mm-yyyy",
            viewMode: "months",
            minViewMode: "months",
        }).on("changeDate", function(e){
            @this.set('bulan', e.format());
        });
    }

    // 页面首次加载时初始化所有选择器
    var initAllPickers = function() {
        initDatePicker('#kt_datepicker');
        initMonthPicker('#month_picker');
    }

    return {
        init: initAllPickers,
        initDatePicker: initDatePicker,
        initMonthPicker: initMonthPicker
    };
}();

// 页面初始加载执行
jQuery(document).ready(function() {
    KTBootstrapDatepicker.init();
});

2. 配置Livewire Morph钩子 #

在@push('script')区块中添加morph.added钩子，监听懒加载组件的DOM插入事件，重新初始化选择器：

Livewire.hook('morph.added', ({ el }) => {
    // 检查当前插入的元素是否包含日期选择器
    const datePickerEl = el.querySelector('#kt_datepicker');
    if (datePickerEl) {
        KTBootstrapDatepicker.initDatePicker(datePickerEl);
    }

    // 检查当前插入的元素是否包含月份选择器
    const monthPickerEl = el.querySelector('#month_picker');
    if (monthPickerEl) {
        KTBootstrapDatepicker.initMonthPicker(monthPickerEl);
    }
});

3. 额外优化建议 #

• 避免重复初始化：可以给已初始化的选择器添加自定义属性（如data-picker-initialized="true"），初始化前先判断该属性是否存在
• 确保Livewire组件中bulan字段已正确定义并可被@this.set()修改
• 若使用第三方UI框架（如Metronic），确认框架工具类（KTUtil）在懒加载场景下全局可用

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