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

admin管理员组

文章数量:1290777

I need support because my javascript data is not updating when the livewire ponent gets re-rendered.

I use Fullcalendar in a livewire ponent

<div>
    {{ dump($events) }} {{-- ⬅️[1] --}}
    <x-card class="mt-4">
        <div id='calendar'></div>
    </x-card>
    
    @push('scripts')
        <script src='/[email protected]/main.min.js'></script>
        <script src='/[email protected]/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='/[email protected]/main.min.css' rel='stylesheet' />
    @endpush
</div>

In my class I have $this->dispatchBrowserEvent('contentChanged'); in the render method.

When I update $events I see the updated data in the dump [1] but events [2] is not updated.

The log [3] shows always the same events

I need support because my javascript data is not updating when the livewire ponent gets re-rendered.

I use Fullcalendar in a livewire ponent

<div>
    {{ dump($events) }} {{-- ⬅️[1] --}}
    <x-card class="mt-4">
        <div id='calendar'></div>
    </x-card>
    
    @push('scripts')
        <script src='https://cdn.jsdelivr/npm/[email protected]/main.min.js'></script>
        <script src='https://cdn.jsdelivr/npm/[email protected]/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/npm/[email protected]/main.min.css' rel='stylesheet' />
    @endpush
</div>

In my class I have $this->dispatchBrowserEvent('contentChanged'); in the render method.

When I update $events I see the updated data in the dump [1] but events [2] is not updated.

The log [3] shows always the same events

• javascript
• php
• laravel
• fullcalendar
• laravel-livewire

Share Improve this question Follow edited Jun 9, 2022 at 19:10 Qirel 26.5k77 gold badges5454 silver badges7171 bronze badges asked Jun 8, 2022 at 18:24 PeterPanPeterPan 33566 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Since you've pushed the script out of your ponent (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;
    // ...

use dehydrate function instead of render function

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

本文标签： phpLaravel Livewire Javascript data is not refreshed after component is rerenderedStack Overflow