通過更改數據重新渲染圖表 Vue-chartjs

Question

我正在嘗試通過更改數據來更新我的圖表。 我試圖通過這個例子來做到這一點Vue Chart.js - 當數據改變時圖表沒有更新但是我遇到了一些問題。 首先是開發工具中的這些錯誤 1. 缺少必需的道具：“chartData”。 2. 計算屬性“chartData”已經定義為一個 prop。 我是這個框架的新手，如果您不將此問題標記為重復，並且您給我一些解決此問題的技巧，我將不勝感激。

<template>
 <bar-chart :data="dataChart" :options="{responsive: true, maintainAspectRatio: false}"></bar-chart> // Bar chart
 <button class="click" @click="changeUi">Change chart</button>// Button 
</template>
<script>
 import Bar from '../Charts/Bar'
   export default {
     data(){
       return{
         dataChart: [44, 49, 48, 49, 55, 47, 43, 55, 53, 43, 44, 51]// data displayed by default   
    },
    components:{
      'bar-chart' : Bar
    },
    methods:{
      changeUi(){
        this.dataChart = [36, 46, 33, 35, 44, 36, 46, 43, 32, 65, 15, 46];// this data should be displayed after clicking button
      }
    }
  }
}
</script>

// Bar.js
import {Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins;

export default {
    extends: Bar,
    mixins: [reactiveProp],
    props: ["data", "options"],// recieving props
    mounted() {
        this.renderBarChart();
    },
    computed: {
        chartData: function() {
            return this.data;
        }
    },
    methods: {
      renderBarChart: function() {
         this.renderChart({
           labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
             datasets: [{
               label: 'Data One',
               backgroundColor: '#505464',
               hoverBackgroundColor: '#2196f3',
               data: this.chartData
                        }
                    ]
                },
                { responsive: true, maintainAspectRatio: false }
            );
        }
    },
    watch: {
        data: function() {
            this._chart.destroy();
            this.renderBarChart();
        }
    }
}

Answer 1

https://github.com/apertureless/vue-chartjs/blob/develop/src/mixins/index.js#L89-L92

chartData 被定義為 mixin.reactiveProp 中的一個對象