我已经在mounted()中创建了一个图表对象,并将其分配给data()中声明的'myChart'变量,因为我希望能够在代码的其他作用域中使用此图表对象,因为我听说无法将mounted中声明的变量传递给方法。
当我调用这个. myChart.update()函数时,我得到错误消息“Uncatched(in promise)RangeError:超出了最大调用堆栈大小””。
有人知道为什么我会得到这个错误,以及如何纠正它,或者是否有其他方法来访问从手表或方法挂载的变量吗?
<script>
import Chart from 'chart.js/auto';
export default {
name: 'ChartTest',
props: {
data: Object,
title: String,
},
data() {
return {
myChart:'' //variable declared
}
},
watch: {
data:function() {
this.myChart.update() //error here
}
},
mounted() {
const progressChart=new Chart(document.getElementById("progress-chart"), {
type: 'line',
data: this.data,
options: {
plugins: {
title: {
display: true,
text: this.title
}
},
scales: {
y: {
display: true,
stacked: true,
max: 0,
min: 100,
title: {
display: true,
text: 'Your Score (%)'
}
}
}
}
});
this.myChart=progressChart //assigning myChart variable to chartjs object
}
}
</script>
1条答案
按热度按时间chy5wohz1#
js与Vue不是100%完全兼容的。(对于一个普通的js应用程序来说非常好),但是这会干扰Vue对DOM的跟踪和管理,和chart.js操作DOM之间的这种拉锯战最有可能导致您看到超出最大调用堆栈大小的错误。我所能想到的:
1.让你的图表成为非React性的,这样Vue就不会跟踪它的变化。这可以通过在数据函数的return语句之外创建myChart变量来实现:
与上述内容无关,但这是一个需要修复的错误:在调用chart
update()
函数之前,需要设置数据现在,您的图表应该可以工作并更新了,尽管它不会是被动的。如果这对您很重要,为什么不试试呢