使用wire:navigate时Livewire图表无法加载的问题求助

当用wire:navigate做页面切换时，图表加载不出来，页面一直空白。

问题截图：

相关JavaScript核心代码（原代码较长，提取关键逻辑）：

document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('myChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['一月', '二月', '三月'],
            datasets: [{
                label: '数据统计',
                data: [15, 28, 36]
            }]
        }
    });
});

问题根源 #

wire:navigate是Livewire的无刷新跳转功能，它只会更新页面局部内容，不会重新触发DOMContentLoaded这类全局DOM加载事件。你的图表初始化代码绑在了这个事件上，切换页面后新的图表DOM加载时，事件没触发，自然就没初始化图表。

解决办法 #

方法一：监听Livewire专属事件 #

Livewire自带livewire:navigated事件，每次用wire:navigate切换页面后都会触发，把图表初始化逻辑绑到这个事件上就行：

document.addEventListener('livewire:navigated', function() {
    // 先销毁旧图表实例，防止重复创建报错
    if (window.myChart) {
        window.myChart.destroy();
    }
    // 找到图表DOM元素再初始化
    const chartEl = document.getElementById('myChart');
    if (chartEl) {
        window.myChart = new Chart(chartEl.getContext('2d'), {
            type: 'line',
            data: {
                labels: ['一月', '二月', '三月'],
                datasets: [{
                    label: '数据统计',
                    data: [15, 28, 36]
                }]
            }
        });
    }
});

方法二：用Livewire组件钩子触发 #

如果图表是在Livewire组件里渲染的，可以在组件的hydrate钩子中派发事件，前端监听这个事件来初始化图表：

// Livewire组件代码
class ChartComponent extends Component
{
    public function hydrate()
    {
        $this->dispatch('init-chart');
    }

    public function render()
    {
        return view('livewire.chart-component');
    }
}

前端监听事件：

document.addEventListener('init-chart', function() {
    // 这里写图表初始化逻辑
    const chartEl = document.getElementById('myChart');
    if (chartEl) {
        new Chart(chartEl.getContext('2d'), {
            // 图表配置
        });
    }
});

方法三：确保DOM元素存在再执行 #

切换页面后，先检查图表DOM元素是否已经渲染完成，再执行初始化代码，避免找不到元素导致的错误。

内容的提问来源于stack exchange，提问作者jeremias rosas