在 onChange 事件值中的 flatpickr 未分配给 alpinejs
In flatpickr in onChange event value is not assigned with alpinejs
我尝试将 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 在这里不起作用?
哪种方式有效?
谢谢!
hostelViewPageComponent
函数未使用 Alpine.js“this”上下文集执行,因此它可能默认为 window。
您应该将 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>
我尝试将 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 在这里不起作用? 哪种方式有效?
谢谢!
hostelViewPageComponent
函数未使用 Alpine.js“this”上下文集执行,因此它可能默认为 window。
您应该将 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>