I try to add flatpickr to my livewire 1.3 / alpinejs 2 app and on onChange event I failed to apply selected value to var defined in alpine Component, as :
/* 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:'-',
...
Why self var does not work here? Which is valid way ?
Thanks!
The hostelViewPageComponent function isn't executed with the Alpine.js "this" context set so it's probably defaulting to the window.
You should move the flapickr initialisation into an init() function and call it using x-init="init()". A function called by reference by x-init should have the correct this context.
See the following:
<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>