Блог

Это может быть основным вопросом, но я борюсь. По сути, у меня есть компонент livewire, который обновляет массив информации о рейсах, которую вводит пользователь. Всякий раз, когда компоненты подвергаются повторной отправке, функциональность flatpickr полностью перестает работать. Я полагаю, это связано с тем, что javascript для инициализации компонента в этом поле не запущен. Какова наилучшая практика для обеспечения их повторной отправки с помощью соответствующего javascript для включения функциональности.

Вот мой фрагмент блейда, который нормально отображается при начальной загрузке, но всякий раз, когда происходит изменение данных, страница повторно отображает все рейсы в массиве, но функциональность 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');
    }
}
  

Вам нужно обернуть входные данные следующим <div> образом:

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

Источник: https://laravel-livewire.com/docs/2.x/alpine-js#ignoring-dom-changes