Vue中PieChart组件数据更新后无法自动刷新问题求助

1. 父组件数据未同步到props：API获取数据后仅更新了chartData.symbols和chartData.price，但传给PieChart的data是chartData.datasets[0].data，这部分始终是初始值[10,20,30]，导致props无变化，图表无法更新。
2. PieChart组件内部未响应props变化：组件内部chartData在data中仅初始化一次，后续props更新时不会自动同步；且watch监听的是内部chartData而非传入的props，无法触发重绘。

步骤1：修复父组件数据传递逻辑 #

API获取数据后，直接更新传给PieChart的目标字段，确保props为最新值：

async created() {
  this.loaded = false;
  try {
    const response = await fetch('https://api2.binance.com/api/v3/ticker/24hr');
    const data = await response.json();
    // 批量提取数据，避免多次修改数组
    const symbols = [];
    const prices = [];
    data.forEach(element => {
      symbols.push(element.symbol);
      prices.push(+element.lastPrice);
    });
    // 更新PieChart依赖的字段
    this.chartData.labels = symbols;
    this.chartData.datasets[0].data = prices;
    this.loaded = true;
  } catch (e) {
    console.error(e);
  }
},

同时修正PieChart引用，:loaded直接传状态而非赋值表达式：

<PieChart
  :data="chartData.datasets[0].data"
  :bgColor="chartData.datasets[0].backgroundColor"
  :labels="chartData.labels"
  :loaded="loaded"
/>

步骤2：修复PieChart组件响应式逻辑 #

将内部chartData改为计算属性，自动响应props变化；监听props深层变化触发图表重绘：

<template>
  <Pie
    ref="pieChart"
    v-if="loaded"
    id="my-chart-id"
    :options="chartOptions"
    :data="chartData"
  />
</template>

<script>
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Pie } from 'vue-chartjs';

ChartJS.register(ArcElement, Tooltip, Legend);

export default {
  name: 'PieChart',
  components: { Pie },
  props: ['data', 'bgColor', 'labels', 'loaded'],
  computed: {
    chartData() {
      return {
        labels: this.labels,
        datasets: [
          {
            data: this.data,
            backgroundColor: this.bgColor,
          },
        ],
      };
    },
    chartOptions() {
      return {
        responsive: true,
        elements: {
          arc: {
            borderWidth: 0,
          },
        },
      };
    },
  },
  watch: {
    chartData: {
      deep: true,
      handler() {
        this.$refs.pieChart?.renderChart(this.chartData, this.chartOptions);
      },
    },
  },
};
</script>

关键说明 #

• 父组件必须确保传递给子组件的props是实际更新后的数据，否则子组件无法感知变化；
• 计算属性生成chartData可自动响应props更新，无需手动同步；
• 开启deep: true监听数组/对象的深层变化，确保数据修改时触发重绘；
• 通过ref获取Pie组件实例，调用其renderChart方法完成图表更新。

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