Javascript Vue chartjs：即使数据没有'；不改变

我有一个带有两个图表的组件，我在单击按钮时会显示它们。我使用图表的相同组件，但通过两个不同的getter为其提供不同的

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>

---

这应该行得通。请注意

---

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

使用a。谢谢。我使用了这个，现在每次单击按钮都会重新呈现图表，但控制台会显示：避免使用非原语值作为键，而是使用字符串/数字值。我添加了如下键：

我想您需要

：key=“'setDataOld'”

。如果要使用显式字符串，则需要在双引号内使用单引号（反之亦然）。基本上，您不希望您的键是一个对象，您希望它是一些基本值，它不必是任何特定的值，只需要图表1和图表2的键不同。真的，你可以用

：key=“1”

和

：key=“2”

来解决你的问题。非常感谢！这个解决方案非常简单，但我决不会想到使用

键

，除非您需要使用

v-for

的列表。现在一切正常。

<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>

<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" />