J'ai créé un objet graphique dans Mounted() et je l'ai attribué à la variable "myChart" déclarée dans data() car je voulais pouvoir utiliser cet objet graphique dans d'autres portées du code car j'ai entendu dire qu'il n'y avait pas de méthode qui passe variables déclarées dans Mounted dans la méthode.
Lorsque j'appelle this.myChart.update(), j'obtiens l'erreur "Uncaught (in promise) RangeError : taille maximale de la pile d'appels dépassée".
Est-ce que quelqu'un sait pourquoi j'obtiens cette erreur et comment la corriger, ou s'il existe un autre moyen d'accéder aux variables montées à partir d'une montre ou d'une méthode ?
<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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
chart.js n'est pas entièrement compatible à 100 % avec Vue. Étant donné que Chart.js manipule directement le DOM (ce qui est idéal pour les applications js normales), cela perturberait le suivi et la gestion du DOM par Vue, et le bras de fer entre Vue et Chart.js pour la manipulation du DOM est ce qui compte le plus. . Cela peut entraîner des erreurs concernant le dépassement de la taille maximale de la pile d'appels. Il y a deux solutions auxquelles je peux penser :
data() { this.myChart = null; return { // myChart: '' //variable declared }; },Pas lié à ce qui précède, mais que vous ayez besoin d'un correctif ou d'un bug : vous devez configurer les données avant de pouvoir appeler la fonction graphique
update()watch: { data: function () { this.myChart.data = this.data; this.myChart.update(); } },Maintenant, votre graphique devrait fonctionner et se mettre à jour, même s'il ne réagira pas. Si c'est important pour vous, pourquoi ne pas essayer