在 onChange 事件值的 flatpickr 中没有分配 alpinejs

Question

我尝试将 flatpickr 添加到我的 livewire 1.3 / alpinejs 2 应用程序中，并且在 onChange 事件中我未能应用 选择值到 alpine 组件中定义的 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 在这里不起作用？ 哪种方式有效？

谢谢！

Answer 1

hostelViewPageComponent 函数没有在设置 Alpine.js “this” 上下文的情况下执行，因此它可能默认为窗口。

您应该将flapickr 初始化移动到init() 函数中并使用x-init="init()" 调用它。 x-init 通过引用调用的函数应该具有正确的 this 上下文。

请参阅以下内容：

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

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


<script>
  function hostelViewPageComponent() {
    return {
      new_hostel_enquery_start_date: '-',
      init: function() {
        // 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

          }
        });
      }
    }
  }
</script>