我在 Mounted() 中创建了一个图表对象，并将其分配给在 data() 中声明的“myChart”变量，因为我希望能够在代码的其他范围中使用此图表对象，因为我听说没有将 Mounted 中声明的变量传递给方法的方法。
当我调用 this.myChart.update() 时，收到错误“未捕获（承诺中）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>
chart.js 与 Vue 并非 100% 完全兼容。因为 Chart.js 直接操作 DOM（对于普通 js 应用程序来说非常好），这会扰乱 Vue 对 DOM 的跟踪和管理，而 Vue 和 Chart.js 之间操作 DOM 的拉锯战才是最重要的。可能会导致您看到有关超出最大调用堆栈大小的错误。我能想到的解决方法有两种：
data() { this.myChart = null; return { // myChart: '' //variable declared }; },与上述无关，但无论您需要修复还是错误：您需要先设置数据，然后才能调用图表
update()函数watch: { data: function () { this.myChart.data = this.data; this.myChart.update(); } },现在您的图表应该可以工作并更新，尽管它不会做出反应。如果这对您很重要，为什么不尝试一下