Necesito soporte porque mis datos de javascript no se actualizan cuando el componente livewire se vuelve a procesar.
Uso Fullcalendar en un componente livewire
<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> En mi clase tengo $this->dispatchBrowserEvent('contentChanged'); en el método de renderizado.
Cuando actualizo $events , veo los datos actualizados en el volcado [1] pero los eventos [2] no están actualizados.
El registro [3] muestra siempre los mismos eventos
Dado que ha sacado el script de su componente (lo cual es una buena idea), no se tocará cuando Livewire vuelva a renderizar y hacer su diferenciación DOM.
Entonces, en su lugar, puede pasar los datos del evento como un parámetro que puede aceptar en el detector de eventos.
Entonces, agregue los datos con el evento,
$this->dispatchBrowserEvent('contentChanged', $this->events); Y acéptelo en el oyente, pasando e a la devolución de llamada (que es el objeto de evento), y acceda a los datos en e.detail .
document.addEventListener('contentChanged', function(e) { var Calendar = FullCalendar.Calendar; var calendarEl = document.getElementById('calendar'); var data = e.detail; // ...use la función de deshidratación en lugar de la función de renderizado
public function dehydrate(){ $this->dispatchBrowserEvent('contentChanged', $this->events); }