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

Question

I use vue-chart.js to draw a simple chart.

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']),
 },
};

When I console my getter in mounted , I can see that I receive an array with two items but when I reload the page, the array appears to be empty. The chart itself doesn't show any information neither before page reloading nor after. Please help!

Answer 1

You should add a watcher which watches changes in your getters. And then update the chart over this.$data._chart.update()

Chart.js is not reactive. If your data changes or "comes to late" after your chart instance get rendered, you will see nothing.

I guess you fill your store over an API ? Then it is even more crutial, as your API calls are async.