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調用是異步的，因此更為關鍵。