• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

355
Views
Los datos de Javascript de Laravel Livewire no se actualizan después de que el componente se vuelve a renderizar

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

about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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; // ...
about 3 years ago · Juan Pablo Isaza Report

0

use la función de deshidratación en lugar de la función de renderizado

 public function dehydrate(){ $this->dispatchBrowserEvent('contentChanged', $this->events); }
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error