重新渲染组件后，Laravel Livewire Javascript数据不会刷新

Question

我需要支持，因为当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]中有更新的数据，但events[2]没有更新。

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

Answer 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;
// ...

Answer 2

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

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