使用 Alpine.js 和 Livewire 更新 Chart.js 标签会破坏图表

Question

我正在使用 Alpine.js 和 Livewire 来动态更新 Chart.js 图表。

我通过 Alpine 和 Livewire 每 30 秒更新一次图表。当我只更新值时，更新永远工作得很好。但如果我尝试更新标签，它会工作两次然后中断（下面的屏幕截图，那条直线对角线不应该在那里）。我已尝试在重置值之前删除这些值，但这没有任何区别。

<div wire:ignore x-data="{
fillColor: @entangle('fillColor').live,
lineColor: @entangle('lineColor').live,
chartData: @entangle('chartData').live,
timeframe: @entangle('timeframe').live,
init() {
    const Labels = this.chartData.map(item => item.time);
    const Values = this.chartData.map(item => item.close);

//MORE STYLING and SETTINGS for Chart.JS

Livewire.on('updateChart', () => {
        {{-- chart.data.datasets[0].data.pop(); --}}
        chart.data.labels = this.chartData.map(item => item.time);
        chart.data.datasets[0].data = this.chartData.map(item => item.close);
        chart.update();
    });

Answer 1

终于！我想到了。在将数据发送回 Alpine.js 之前，我没有清除 livewire 控制器中的数组......