Vue-chartjs：在状态变化时重新加载图表答案

【问题标题】：Vue-chartjs : reload chart on state changeVue-chartjs：在状态变化时重新加载图表
【发布时间】：2018-01-11 10:33:09
【问题描述】：

我正在尝试使图表对状态变化做出反应，我在 sidenav 上有一些过滤器和一个包含 chart.js 组件的组件，如下所示：

<tendance-chart slot="content" class="chart-wrapper" v-if="!loading" :labelsRepartitionTendance="labelsRepartitionTendance" :repartitionTendance="repartitionTendance"></tendance-chart>

效果很好，但是我想在过滤器更改时重新加载此图表，我该怎么做？

【问题讨论】：

标签： vuejs2 vue-chartjs

【解决方案1】：

当你的过滤器在函数执行之前改变加载为真，最后改变加载为假。然而，这不是一个好的做法，基本上你的图表应该监听它的数据并在每次发生变化时重新呈现自己。

【讨论】：

【解决方案2】：

vue-chartjs 带有两个 mixin，reactiveDataMixin 和 reactivePropMixin。如果数据发生变化，它们将向 chartData 添加观察者并重新渲染更新图表。 http://vue-chartjs.org/#/home?id=reactive-data

【讨论】：

【解决方案3】：

您必须使用 watch 并再次传递 setTimeout() 调用处理数据的函数。

 watch: {
        dataToObserve() {
            setTimeout(() => {
                this.functionThatHandlesData();
            }, 1000);
        }
    },

【讨论】：