1

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

<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如果数据发生变化（并初始化漂亮的动画），它会呈现一个新图表。但是目前两个 getter 给出了相同的数据，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>
4

1 回答 1

1

这应该有效。注意键。

<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 提供有关这两个图表的区别的提示，以便它明确知道要渲染哪个图表，而不是使用其默认的组件重用策略。

于 2018-05-22T15:27:45.337 回答