Laravel Livewire Javascript 数据在组件重新渲染后不刷新答案

【问题标题】：Laravel Livewire Javascript data is not refreshed after component is re-renderedLaravel Livewire Javascript 数据在组件重新渲染后不刷新
【发布时间】：2022-06-11 01:13:16
【问题描述】：

我需要支持，因为当 livewire 组件重新渲染时，我的 javascript 数据没有更新。

我在 livewire 组件中使用Fullcalendar

<div>
    {{ dump($events) }} {{-- ⬅️[1] --}}
    <x-card class="mt-4">
        <div id='calendar'></div>
    </x-card>
    
    @push('scripts')
        <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js'></script>
        <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/locales/de.js'></script>
        
        <script>
            document.addEventListener('contentChanged', function() {
                console.log(@js($events)); // ⬅️[3]
                var Calendar = FullCalendar.Calendar;
                var calendarEl = document.getElementById('calendar');
                //                ⬇️[2]
                var data = @js($events);
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    locale: "de",
    
                    events: JSON.parse(data).map((event) => ({
                        ...event,
                        backgroundColor: event.title < 3 ? '#B23220' : (event.title < 11 ? '#C3B031' : '#20B22C'),
                        borderColor: event.title < 3 ? '#B23220' : (event.title < 11 ? '#C3B031' : '#20B22C'),
                    })),
    
                    headerToolbar: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    },
                    
                    loading: function(isLoading) {
                        if (!isLoading) {
                            this.getEvents().forEach(function(e){
                                if (e.source === null) {
                                    e.remove();
                                }
                            });
                        }
                    },
                });
                calendar.render();
                @this.on(`refreshCalendar`, () => {
                    calendar.refetchEvents()
                });
            });
        </script>
        <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css' rel='stylesheet' />
    @endpush
</div>

在我的课堂上，我在渲染方法中有$this->dispatchBrowserEvent('contentChanged');。

当我更新 $events 时，我在转储 [1] 中看到更新的数据，但事件 [2] 没有更新。

日志 [3] 总是显示相同的事件

【问题讨论】：

标签： javascript php laravel fullcalendar laravel-livewire

【解决方案1】：

由于您已将脚本从组件中推出（这是个好主意），因此当 Livewire 重新渲染并进行 DOM 比较时，它不会被触及。

因此，您可以将事件数据作为可以在事件侦听器中接受的参数传递。

所以，在事件中添加数据，

$this->dispatchBrowserEvent('contentChanged', $this->events);

并在侦听器中接受它，通过将e 传递给回调（即事件对象），并访问e.detail 中的数据。

document.addEventListener('contentChanged', function(e) {
    var Calendar = FullCalendar.Calendar;
    var calendarEl = document.getElementById('calendar');
    var data = e.detail;
    // ...

【讨论】：

【解决方案2】：

使用脱水函数代替渲染函数

public function dehydrate(){
    $this->dispatchBrowserEvent('contentChanged', $this->events);
}

【讨论】：