Vue中使用API响应数据更新Chart.js饼图时UI未更新问题求助

你遇到的问题：通过API获取数据并赋值给chartData的嵌套属性后，饼图UI没有同步更新。从控制台日志能看到数据已正确存入响应式对象，但图表未渲染新数据。

核心原因：vue-chartjs的Canvas图表组件对嵌套数据的深层变化无法自动触发重渲染。直接修改datasets[0].data这类嵌套属性，虽然Vue响应式系统能追踪到变化，但组件内部的Chart实例未感知到数据更新，因此不会重新绘制图表。

以下是两种可行的解决方案：

方案1：替换整个chartData对象（推荐） #

通过创建新的chartData对象替换原有ref值，让Vue检测到顶层引用变化，触发组件重渲染。

修改onMounted中的赋值代码：

// 替换原有直接修改嵌套数组的代码
chartData.value = {
  ...chartData.value, // 保留原有labels等配置
  datasets: [
    {
      ...chartData.value.datasets[0], // 保留label、backgroundColor等样式配置
      data: [apiData.recycling || 0, apiData.general || 0, apiData.organic || 0]
    }
  ]
};

原理：Vue的ref监听的是对象的整体引用变化，替换整个对象后，组件会重新接收data prop，从而触发Chart实例的重新渲染。

方案2：手动调用Chart实例的update方法 #

若不想替换整个对象，可获取Pie组件实例，手动调用Chart的update()方法强制刷新图表。

步骤如下：

1. 给模板中的Pie组件添加ref属性：

<Pie ref="pieChartRef" :data="chartData" :options="chartOptions" />

2. 在<script setup>中定义ref变量：

const pieChartRef = ref(null);

3. 修改onMounted中的代码，赋值后手动触发更新：

// 先更新数据
chartData.value.datasets[0].data = [
  apiData.recycling || 0,
  apiData.general || 0,
  apiData.organic || 0,
];

// 手动调用Chart实例的update方法
if (pieChartRef.value?.chart) {
  pieChartRef.value.chart.update();
}

原理：直接调用Chart.js实例的update()方法，强制图表根据新数据重新绘制。

修改完成后重新运行项目，即可看到饼图同步更新为API返回的数值。

内容的提问来源于stack exchange，提问作者Gary O'Connor