Vue.js：重新定义了图表数据

Question

我使用vue-chart.js绘制一个简单的图表。

import { Line } from 'vue-chartjs';

export default {
 extends: Line,
 mounted() {
   this.renderChart({
   labels: [this.getChartLabels],
   datasets: [
     {
       label: 'Active users',
       backgroundColor: '#f87979',
       data: [this.getChartData],
     },
   ],
 },
 { responsive: true,
   maintainAspectRatio: false,
 });
},
 computed: {
  ...mapGetters(['getFullReport', 'getChartLabels', 'getChartData']),
 },
 methods: {
  ...mapActions(['loadFullReport']),
 },
};

当我将我的吸气剂mounted在mounted ，可以看到我收到了一个包含两个项目的数组，但是当我重新加载页面时，该数组似乎为空。 图表本身在页面重新加载之前和之后都不会显示任何信息。 请帮忙！

Answer 1

您应该添加一个观察器，以监视您的吸气剂中的变化。 然后通过this.$data._chart.update()更新图表

Chart.js不具有反应性。 如果在呈现图表实例后数据发生更改或“迟到”，则将看不到任何内容。

我猜您是通过API来填充商店吗？ 然后，由于您的API调用是异步的，因此更为关键。