Javascript 通过更改数据Vue chartjs重新渲染图表

我正试图通过更改数据来更新图表。我正试图按照这个例子来做，但我遇到了一些问题。首先，开发工具1中存在这些错误。缺少必需的道具：“图表数据”。2.计算属性“chartData”已定义为道具。我是这个框架的新手，如果你不把这个问题标记为重复问题，如果你能给我一些解决这个问题的建议，我将不胜感激

<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();
        }
    }
}

//条形图
更改图表//按钮
从“../Charts/Bar”导入条形图
导出默认值{
数据（）{
返回{
dataChart:[44,49,48,49,55,47,43,55,53,43,44,51]//默认显示的数据
},
组成部分：{
“条形图”：条形图
},
方法：{
changeUi（）{
this.dataChart=[36,46,33,35,44,36,46,43,32,65,15,46]；//单击按钮后应显示此数据
}
}
}
}
//Bar.js
从“vue chartjs”导入{Bar，mixins}
const{reactiveProp}=mixins；
导出默认值{
延伸：酒吧，
mixins:[reactiveProp]，
道具：[“数据”，“选项”]，//接收道具
安装的（）{
这个.renderBarChart（）；
},
计算：{
chartData:函数（）{
返回此.data；
}
},
方法：{
renderBarChart:函数（）{
这是我的艺术({
标签：['1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9'，'10'，'11'，'12']，
数据集：[{
标签：“数据一”，
背景颜色：'#505464'，
hoverBackgroundColor:“#2196f3”，
data:this.chartData
}
]
},
{响应：true，维护AspectRatio:false}
);
}
},
观察：{
数据：函数（）{
这个._chart.destroy（）；
这个.renderBarChart（）；
}
}
}

---

chartData被定义为mixin中的一个对象。reactiveProp

我复制了您的代码，然后创建了它，它似乎工作正常。（仅注释掉

mixins:[reactiveProp]

）我注释了，但它不起作用。在你的小提琴中，你写了“Vue.config.productionTip=false”，也许我应该用这个字符串，如果是，我应该写在哪里？第二个问题，也许我应该将Bar.js重写为vue组件，因为现在它是简单的js文件？