Vue-chartjs：即使数据没有改变也重新渲染图表

Question

我有一个包含两个图表的组件，我在按钮单击时显示。我使用图表的相同组件，但我通过两个不同的吸气剂给它不同的chartData。图表如下所示：

<script>
import { Bar, mixins } from 'vue-chartjs';

export default {
extends: Bar,
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
mounted() {
   this.renderChart(this.chartData, this.options);
  },
};
</script>

我知道reactiveProp 会在数据发生变化时呈现一个新图表（并初始化漂亮的动画）。但目前两个吸气剂为this.chartData 提供相同的数据，所以当我尝试切换图表时，它保持不变。有什么方法可以更新或销毁数据，以便重新渲染图表，即使它从另一个 getter 获取相同的数据？由于某些原因，update()、destroy()、clear() 等方法没有奏效，但可能是我在错误的地方使用了它们。

这是我的图表页面：

<template>
 <div>
  <button @click="showAll = false">
          Show old users
  </button>
  <button @click="showAll = true">
          Show all users
  </button>
  <chart v-if="isChartData === true && showAll === false" :options="options" :chart-data="setDataOld" />
  <chart v-if="isChartData === true && showAll === true" :options="options" :chart-data="setData" />
 <div>
<template>

Answer 1

这应该可行。注意keys。

<chart :key="1" v-if="isChartData === true && showAll === false" :options="options" :chart-data="setDataOld" />
<chart :key="2" v-if="isChartData === true && showAll === true" :options="options" :chart-data="setData" />

本质上，您希望能够向 Vue 提供有关这两个图表的区别的提示，以便它明确知道要渲染哪个图表，而不是使用其默认的组件重用策略。