Livewire 调度具有动态内容的事件模式

Question

我试图向用户显示他几天内有空的时间，并以模式显示它们。

public function searchAvailability(){
        $this->validate();
        $doctor = Doctor::where('id',$this->selectedDoctor)->first(); 
        $doctorTimes = DoctorTime::where('doctor_id',$this->selectedDoctor)->get();
        $parsedDate = Carbon::parse($this->selectedDate);

        $dayName = $parsedDate->format('l');
        
        if ($parsedDate->isFuture()) {
            foreach($doctorTimes as $doctorTime){
                if ($doctorTime->day == $dayName) {
                    $this->availableOn = DoctorTime::where('doctor_id',$this->selectedDoctor)
                    ->where('day',$doctorTime->day)->where('is_taken',0)->get();
                }
            }
            if (count($this->availableOn) > 0) {
                $this->dispatch('loading-success',
                title: 'Search Availability',
                );
            }
}


protected $listeners = ['showModal' => 'showTimesModal','loadingFailed' => 'failed'];

public function showTimesModal() { 
    $this->dispatch('appointment-modal',availableOn: $this->availableOn);
}

我在这里监听事件：

window.addEventListener('loading-success', (event) =>{ 
    let data = event.detail
    let timerInterval;

    Swal.fire({
        title: data.title,
        timer: 2000,
        timerProgressBar: true,
        didOpen: () => {
            Swal.showLoading();
            const timer = Swal.getPopup().querySelector("b");
            timerInterval = setInterval(() => {
                timer.textContent = `${Swal.getTimerLeft()}`;
            }, 100);
        },
        willClose: () => {
            clearInterval(timerInterval);
        }
    })
    .then((result) => {
        if (result.dismiss === Swal.DismissReason.timer) {
            Livewire.dispatch('showModal');
        }
    });
})

protected $listeners = ['showModal' => 'showTimesModal','loadingFailed' => 'failed'];`


public function showTimesModal(){         
    $this->dispatch('appointment-modal',availableOn: $this->availableOn);         
}

<div class="modal fade"  id="showTimes" tabindex="-1" aria-labelledby="showTimes" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> ...

@script
    $wire.on('appointment-modal', (availableOn) =\> {
        console.log(availableOn);
        const myModal = new bootstrap.Modal('#showTimes');
        myModal.show();
    });
@endscript

我尝试过像这样循环数据

availableOn.forEach(time => { 
    let timeElement = document.createElement('p'); 
    timeElement.textContent = time.start_time + ' - ' + time.end_time; 
    modalBody.appendChild(timeElement) 
    const myModal = new bootstrap.Modal('#showTimes'); 
    myModal.show();

但是模态消失了！

总体而言，代码使用 Laravel (PHP)、JavaScript（使用 SweetAlert 和 Livewire）以及用于设计模式样式的 Bootstrap 来编排搜索可用性、显示成功消息以及显示具有可用时间的模式窗口的流程。

Answer 1

Livewire 将重新绘制 HTML 元素，除非您另有指示。为此，您可以添加

wire:ignore.self

，这将告诉 Livewire 不要修改该元素。

<div class="modal fade" id="showTimes" wire:ignore.self tabindex="-1" aria-labelledby="showTimes" aria-hidden="true"> 
    <div class="modal-dialog modal-dialog-centered"> 
        <div class="modal-content"> 
            <div class="modal-header"> 
                ...

请参阅相关的 Livewire 文档：https://livewire.laravel.com/docs/wire-ignore