Saya mencipta objek carta dalam Mounted() dan memberikannya kepada pembolehubah "myChart" yang diisytiharkan dalam data() kerana saya mahu dapat menggunakan objek carta ini dalam skop kod lain kerana saya mendengar tiada Kaedah yang lulus pembolehubah yang diisytiharkan dalam Mounted to the method.
Apabila saya memanggil ini.myChart.update() saya mendapat ralat "Uncaught (in promise) RangeError: Saiz tindanan panggilan maksimum melebihi".
Adakah sesiapa tahu mengapa saya mendapat ralat ini dan cara membetulkannya, atau jika terdapat cara lain untuk mengakses pembolehubah yang dipasang daripada jam tangan atau kaedah?
<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] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
chart.js tidak 100% serasi sepenuhnya dengan Vue. Oleh kerana Chart.js memanipulasi DOM secara langsung (yang bagus untuk aplikasi js biasa), ini akan mengganggu penjejakan dan pengurusan DOM Vue, dan tarik tali antara Vue dan Chart.js mengenai memanipulasi DOM adalah perkara yang paling penting. . Ini mungkin menyebabkan anda melihat ralat tentang melebihi saiz tindanan panggilan maksimum. Terdapat dua penyelesaian yang saya boleh fikirkan:
data() { this.myChart = null; return { // myChart: '' //variable declared }; },Tidak berkaitan dengan perkara di atas, tetapi sama ada anda memerlukan pembetulan atau pepijat: anda perlu menyediakan data sebelum anda boleh memanggil carta
update()fungsiwatch: { data: function () { this.myChart.data = this.data; this.myChart.update(); } },Kini carta anda sepatutnya berfungsi dan dikemas kini, walaupun ia tidak akan bertindak balas. Jika ini penting untuk anda, mengapa tidak mencubanya