Livewire 和 Flatpickr - 重新渲染后失败
Posted
技术标签:
【中文标题】Livewire 和 Flatpickr - 重新渲染后失败【英文标题】:Livewire and Flatpickr - fails after rerender 【发布时间】:2021-01-07 12:30:34 【问题描述】:这可能是一个基本问题,但我很挣扎。本质上,我有一个 livewire 组件,可以更新用户输入的一系列航班信息。每当组件重新渲染时,flatpickr 功能就会完全停止工作。我认为这是因为用于在该字段上初始化组件的 javascript 未运行。确保使用适当的 javascript 重新呈现这些以启用该功能的最佳做法是什么。
这是我的刀片 sn-p,它在初始加载时呈现良好,但每当数据发生更改时,页面会重新呈现数组中的所有航班,但 flatpickr 功能不再起作用。
<form>
@foreach($flights as $i => $f)
<label
x-data
x-init="flatpickr($refs.input,
dateFormat: 'Y-m-d H:i',
altInput: true,
altFormat: 'F j, Y h:i K',
enableTime: true,
)">
<div class="form-label">Arrival Time</div>
<div class="relative">
<input type="text"
wire:model="flights. $i .ArrivalTime"
wire:key="fl $i arrtime"
data-input
x-ref="input"
placeholder="Arrival Time"
value=" $f['ArrivalTime']"
name="flights[ $i ][ArrivalTime]"
id="ArrivalTime$i"
/>
</div>
</label>
@endforeach
</form>
livewire组件基本上是这样的:
class Itinerary extends Component
public $itin = null;
public $flights = [];
public function render()
return view('livewire.itinerary');
【问题讨论】:
【参考方案1】:只有你需要像这样将输入包装在一个 div 中:
<div wire:ignore>
<!-- Here your input -->
</div>
【讨论】:
以上是关于Livewire 和 Flatpickr - 重新渲染后失败的主要内容,如果未能解决你的问题,请参考以下文章
Laravel Livewire 组件在刷新后不会自动刷新/重新加载
使用 vue-flatpickr-component 时,“Object(...) 不是函数”和“this.$refs.root 未定义”