Livewire 3 - 使用惰性组件时不会触发月份选择器/日期选择器

Question

我使用 livewire 3 的项目在我的组件使用 lazy 组件时出现了一个小问题。

<livewire:report lazy />

当我不使用lazy时，手动刷新页面时monthpicker和datepicker没有问题 或使用 wire:navigate 链接切换页面。

但是当我向组件添加惰性时，月份选择器和日期选择器无法工作。

我的猜测是因为 livewire 在加载到我的具有月份选择器和日期选择器的页面之前使用了 placeholder。

我的代码：

<div class="row">
    <div class="col-md-8">
        <div class="card card-custom gutter-b example example-compact">
            <div class="card-header">
                <h3 class="card-title">Report</h3>
            </div>

            <form wire:submit.prevent="submit">
                <div class="card-body">
                    <div class="form-group">
                        <label>Pilih Bulan<span class="text-danger">*</span></label>

                        <input type="text"
                            class="form-control custom-width"
                            placeholder="Select month"
                            wire:model='bulan'
                            id="month_picker"
                            autocomplete="off"
                            />

                        @error('bulan') <span class="error">{{ $message }}</span> @enderror
                    </div>
                </div>

                <div class="card-footer">
                    <div class="text-center" wire:loading>
                        <button type="button" class="btn btn-primary spinner spinner-white spinner-right" disabled>
                            Validating
                        </button>
                    </div>

                    <button type="submit" class="btn btn-primary mr-2"
                            wire:loading.attr="disabled"
                            wire:loading.class="d-none">
                        Generate
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>

@push('script')
<script>
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 demos = function() {
        $('#kt_datepicker').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());
        });

        $('#month_picker').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());
        });
    }

    return {
        init: function() {
            demos();
        }
    };
}();

jQuery(document).ready(function() {
    KTBootstrapDatepicker.init();
});
</script>
@endpush

我已经尝试按照文档在livewire 3上阅读和使用Hook，但仍然无法解决这个问题。

Livewire.hook('morph.added',  ({ el }) => {
    //
})

也许我错过了什么？需要你的帮助

Answer 1

一个可能的解决方案是使用语法

@script @endscript

而不是

@push('script') @endpush

，这样 Livewire 将管理组件脚本，这将使其能够正确执行：

@script

<script>

    const KTBootstrapDatepicker = function() {

        let arrows;

        if (KTUtil.isRTL()) {

   .....

</script>
 
@endscript

请注意，我使用 const 而不是 var 来声明 KTBootstrapDatepicker，因为 @script @endscript 语法在放置在第一个位置时存在旧构造或注释的一些问题

一些建议：

• 代替

  @this.set('bulan', e.format())

  以避免每次值更改时 AJAX 调用，您可以使用以下语法：

  @this.bulan = e.format()

  。这样，更改会保留在本地，但可以在执行submit时发送到后端（您可以使用浏览器的network选项卡进行检查）。
  使用 @script @endscript 您还可以使用

  $wire.bulan = e.format()

  语法代替

  @this.bulan = e.format()

• 虽然datepicker看起来运行良好，但由于它是由Bootstrap代码管理的，因此可能会对Livewire造成一些干扰。为了避免冲突，您可以将 datepicker input 包装在带有 wire:ignore 属性的标签中，这样 Livewire 就不会干扰输入：

<div wire:ignore>

    <input type="text"
           class="form-control custom-width"
           placeholder="Select month"
           id="month_picker"
           .....
    >

</div>