在flatpickr中，onChange事件值未使用alpinejs分配

问题描述

我尝试将flatpickr添加到我的livewire 1.3 / alpinejs 2应用程序，并且在onChange事件上我无法应用选定的值作为高山组件中定义的var，如：

/* Init alpine Component */
        <div class="hostel_item_commands_row p-3" x-data="hostelViewPageComponent()"  @custom-event="console.log($event.detail.foo)">

new_hostel_enquery_start_date::<div x-html="new_hostel_enquery_start_date"></div>

...
<input
    type='text'
    id="flatpickr_new_hostel_enquery_start_date"
    class="form-control editable_field"
/>

...

<script>
        function hostelViewPageComponent() {

// In onChange of flatpickr this would ref to flatpickr,so I assign self var
            var self = this;
            var fp = flatpickr(document.querySelector('#flatpickr_new_hostel_enquery_start_date'),{
                dateFormat: 'Y-m-d',// 2018-01-21 12:39:36
                altFormat: "F j,Y",altInput: true,inline: false,locale: "en",onChange: function(selectedDates,date_str,instance) {
                    console.log('selectedDates::')
                    console.log(selectedDates) //valid
                    console.log('date_str: ',date_str);

                    console.log('self::')
                    console.log(self)  // I check content of self var : https://prnt.sc/u64eug


                    // self.$dispatch('custom-event',{ foo: 'bar',date_str: 'date_str' })
                    // If to uncomment line above I got error : ypeError: self.$dispatch is not a function

                    self.new_hostel_enquery_start_date= date_str
                    console.log('self.new_hostel_enquery_start_date::')
                    console.log(self.new_hostel_enquery_start_date)
                    // looks like value is NOT assigned to my component new_hostel_enquery_start_date var

                }
            });
            // alert( 'AFTER flatpickr::' )
            return {
                new_hostel_enquery_start_date:'-',...

为什么self var在这里不起作用？哪种方法有效？

谢谢！

解决方法

setY()函数未与Alpine.js“此”上下文集一起执行，因此它可能默认为窗口。

您应将弗拉维克尔初始化移至hostelViewPageComponent函数中，并使用init()进行调用。 x-init="init()"引用调用的函数应具有正确的x-init上下文。

请参阅以下内容：

this

alpine.js flatpickr javascript