Livewire 和 Flatpickr - 重新渲染后失败

Question

这可能是一个基本问题，但我正在努力。本质上，我有一个 livewire 组件，用于更新用户输入的一系列航班信息。每当组件被重新渲染时，flatpickr 功能就会完全停止工作。我认为这是因为初始化该字段上的组件的 javascript 不是运行。确保使用适当的 javascript 重新呈现以启用功能的最佳做法是什么。

这是我的 blade 片段，它在初始加载时呈现良好，但每当数据发生更改时，页面 re-renders 数组中的所有航班，但 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');
    }
}

Answer 1

您需要将输入包装在 <div> 中，如下所示：

<div wire:ignore>
    <!-- Your input here -->
</div>

来源：https://laravel-livewire.com/docs/2.x/alpine-js#ignoring-dom-changes

Livewire 和 Flatpickr - 重新渲染后失败

Livewire and Flatpickr - fails after rerender

flatpickr

laravel-livewire

alpine.js