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

Question

我需要支持，因为当 livewire 组件重新渲染时我的 javascript 数据没有更新。

\n

我用的是全日历我在 Livewire 组件中

\n

<div>\n    {{ dump($events) }} {{-- \xe2\xac\x85\xef\xb8\x8f[1] --}}\n    <x-card class="mt-4">\n        <div id=\'calendar\'></div>\n    </x-card>\n    \n    @push(\'scripts\')\n        <script src=\'https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js\'></script>\n        <script src=\'https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/locales/de.js\'></script>\n        \n        <script>\n            document.addEventListener(\'contentChanged\', function() {\n                console.log(@js($events)); // \xe2\xac\x85\xef\xb8\x8f[3]\n                var Calendar = FullCalendar.Calendar;\n                var calendarEl = document.getElementById(\'calendar\');\n                //                \xe2\xac\x87\xef\xb8\x8f[2]\n                var data = @js($events);\n                var calendar = new FullCalendar.Calendar(calendarEl, {\n                    locale: "de",\n    \n                    events: JSON.parse(data).map((event) => ({\n                        ...event,\n                        backgroundColor: event.title < 3 ? \'#B23220\' : (event.title < 11 ? \'#C3B031\' : \'#20B22C\'),\n                        borderColor: event.title < 3 ? \'#B23220\' : (event.title < 11 ? \'#C3B031\' : \'#20B22C\'),\n                    })),\n    \n                    headerToolbar: {\n                        left: \'prev,next today\',\n                        center: \'title\',\n                        right: \'dayGridMonth,timeGridWeek,timeGridDay,listWeek\'\n                    },\n                    \n                    loading: function(isLoading) {\n                        if (!isLoading) {\n                            this.getEvents().forEach(function(e){\n                                if (e.source === null) {\n                                    e.remove();\n                                }\n                            });\n                        }\n                    },\n                });\n                calendar.render();\n                @this.on(`refreshCalendar`, () => {\n                    calendar.refetchEvents()\n                });\n            });\n        </script>\n        <link href=\'https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css\' rel=\'stylesheet\' />\n    @endpush\n</div>\n

\n

在我的课堂上我有$this->dispatchBrowserEvent(\'contentChanged\');渲染方法。

\n

当我更新的时候$events我在转储 [1] 中看到更新的数据，但事件 [2] 未更新。

\n

日志 [3] 始终显示相同的事件

\n

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