Chart JS 对计算 属性 中的变化没有反应

Question

我计算了 属性:

computed: {
    drilldownData() {
        if (this.toggle_drill === "up") {
            return this.waterfallDataSmall
        } else {
            return this.waterfallData
        }
    }
}

并且 toggle_drill 是连接到按钮切换组件的模型变量：

<v-btn-toggle v-model="toggle_drill">

当我切换它时，toggle_drill 会毫无问题地从上到下改变值。

但是您可以在此处的复制示例中看到： Codesandbox

图表只更新一次，仅此而已。它应该更新，因为 toggle_drill 正在更新，这个计算的 属性 表明。初次更新后似乎崩溃了，但我不知道为什么。

Answer 1

chart.js 更改图表数据对象，原始 waterfallDataSmall 在第一次更改后被覆盖。

一个简单的修复方法是传递一个克隆的对象。

drilldownData() {
  if (this.toggle_drill === "up") {
    return JSON.parse(JSON.stringify(this.waterfallDataSmall));
  } else {
    return this.waterfallData;
  }
}