vue.js - Vue Chart JS 和选项 react 性

Question

我正在尝试重新创建 donut 到馅饼的行为变化，如下所示: https://www.chartjs.org/samples/latest/scriptable/pie.html

我正在使用 Chart JS 的 VueJS 版本，在重新创建它之后，它似乎根本没有反应性。

这是我用来将图表更改为另一个图表的方法:

togglePieDoughnut() {
  this.options.cutoutPercentage = 50;
}

正如你所看到的，即使我使用了reactiveprop mixin，它也没有按预期工作。

编辑:准确地说，我想重新创建图表更新行为，如 Chartjs.org 网站上的示例所示。我不想重新渲染图表，而是更新它以使过渡保持平稳。

Answer 1

问题似乎是模板没有对数据更改使用react。强制模板重新渲染的最佳方法是绑定(bind)一个键，对于我们的示例，我们正在更改此值，模板将在更改时更新:

:key="options.cutoutPercentage"

Codepen 示例: https://codesandbox.io/s/vue-chartjs-demo-t8vxu?file=/src/App.vue