I created a chart object in Mounted() and assigned it to the "myChart" variable declared in data() because I wanted to be able to use this chart object in other scopes of the code as I listened Says that the variable declared in Mounted is not passed to the method.
When I call this.myChart.update(), I get the error "Uncaught (in promise) RangeError: Maximum call stack size exceeded".
Does anyone know why I'm getting this error and how to correct it, or if there is another way to access mounted variables from within a watch or method?
<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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
chart.js is not 100% fully compatible with Vue. Because Chart.js directly manipulates the DOM (which is great for normal js applications), this would disrupt Vue's tracking and management of the DOM, and the tug-of-war between Vue and Chart.js over manipulating the DOM is what matters most. This may cause you to see errors about exceeding the maximum call stack size. There are two solutions I can think of:
data() { this.myChart = null; return { // myChart: '' //variable declared }; },Not related to the above, but whether you need a fix or a bug: you need to set up the data before you can call the chart
update()functionwatch: { data: function () { this.myChart.data = this.data; this.myChart.update(); } },Now your chart should work and update, although it won't react. If this is important to you, why not give it a try