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:'-',
...
ここで自己変数が機能しないのはなぜですか? 有効な方法はどれですか?
ありがとう！