Laravel Livewire Component Not Refreshing/Reloading Automatically After Refreshing It

Laravel Livewire Javascript data is not refreshed after component is re-rendered

Since you've pushed the script out of your component (which is a good idea), it will not be touched when Livewire is re-rendering and doing its DOM-diffing.

So instead, you can pass the event-data as a parameter which you can accept in the event-listener.

So, add the data with the event,

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

And accept it in the listener, by passing e into the callback (which is the event-object), and access the data in e.detail.

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

Refreshing component using Laravel Livewire emit doesn't work as expected

You are never updating the public $taskTime, which is the value that is linked to which button is meant to show. If the task is paused on load, when you run pauseTask, the change of status is processed and renders your change due to your third if statement.

In the case that your $taskTime is null, the play button will never disappear. If the $taskTime is set on initial load, then the play/pause behaviour will work as expected.

P.S. If you find the models on mount, you don't need to query your database more than once to find the Task model each time. If you read the docs, you see that the Laravel Model is a supported type.

Livewire Not Rerendering

From Livewire's docs:

Make sure your Blade view only has ONE root element.
Source

Putting it in a div should fix this issue.

---

Related Topics