我在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(); } },現在您的圖表應該可以工作並更新，儘管它不會做出反應。如果這對您很重要，為什麼不嘗試一下