Laravel+Livewire+FullCalendar：事件增改后模态框表单为空问题

核心本质 #

创建/更新事件后，FullCalendar前端已同步最新事件数据，但Livewire组件的状态未与前端事件数据同步。虽然eventClick能拿到正确的info.event，但填充模态框时未将这些数据传递给Livewire组件的绑定属性，导致表单显示为空；刷新页面后Livewire从后端重新拉取数据，属性被正确赋值，表单才恢复正常。

常见问题点及修复方案 #

1. 模态框填充时未同步前端事件数据到Livewire属性 #

如果eventClick仅触发模态框显示，未通过Livewire方法传递事件数据，组件绑定的表单属性就会处于未赋值状态。

错误示例：

document.addEventListener('DOMContentLoaded', function() {
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        // 其他配置
        eventClick: function(info) {
            $('#eventModal').modal('show');
            // 未将info.event数据传递给Livewire
        }
    });
    calendar.render();
});

修复方案：
通过@this调用Livewire组件的方法，传递事件ID让组件加载并赋值属性：

eventClick: function(info) {
    // 调用组件的loadEvent方法，传入事件ID
    @this.call('loadEvent', info.event.id).then(() => {
        // 等待Livewire完成属性赋值后再显示模态框
        $('#eventModal').modal('show');
    });
}

Livewire组件中添加对应方法：

public $event;
public $title;
public $start;
public $end;

public function loadEvent($eventId)
{
    $this->event = \App\Models\Event::findOrFail($eventId);
    // 将事件数据赋值给表单绑定的属性
    $this->title = $this->event->title;
    $this->start = $this->event->start;
    $this->end = $this->event->end;
}

2. 创建/更新事件后未同步Livewire的事件数据集 #

若Livewire组件内维护了事件集合，创建/更新后需重新拉取数据，确保组件状态与数据库一致：

public function createEvent()
{
    $newEvent = \App\Models\Event::create([
        'title' => $this->title,
        'start' => $this->start,
        'end' => $this->end,
    ]);
    // 重新获取事件数据，更新组件状态
    $this->events = \App\Models\Event::all();
    // 触发浏览器事件关闭模态框
    $this->dispatchBrowserEvent('closeModal');
}

3. 临时事件未替换为真实ID #

创建事件时若给FullCalendar传入了前端临时ID，需在保存后替换为数据库真实ID，避免后续loadEvent找不到对应数据：

public function createEvent()
{
    $newEvent = \App\Models\Event::create([
        'title' => $this->title,
        'start' => $this->start,
        'end' => $this->end,
    ]);
    // 通知前端替换临时事件
    $this->dispatchBrowserEvent('replaceTempEvent', [
        'tempId' => $this->tempEventId,
        'newEvent' => [
            'id' => $newEvent->id,
            'title' => $newEvent->title,
            'start' => $newEvent->start,
            'end' => $newEvent->end,
        ]
    ]);
}

前端监听并替换事件：

window.addEventListener('replaceTempEvent', function(e) {
    const tempEvent = calendar.getEventById(e.detail.tempId);
    if (tempEvent) tempEvent.remove();
    calendar.addEvent(e.detail.newEvent);
});

总结 #

最直接的原因是点击事件时未通过Livewire方法将事件数据同步到组件绑定属性，导致表单无数据。按照上述方案，确保点击事件时先调用Livewire加载方法赋值属性，再显示模态框，即可解决问题。

内容的提问来源于stack exchange，提问作者Petitemo