【Vue.js】Uncaught RangeError: Maximum call stack size exceeded.の原因と解決法

【Vue.js】Uncaught RangeError: Maximum call stack size exceeded.の原因と解決法

Vue.js

Vue.jsで「Uncaught RangeError: Maximum call stack size exceeded.」のエラーが発生したので、その原因と解決策をメモしておきます。

「Uncaught RangeError: Maximum call stack size exceeded.」による症状

モーダルを押下した際に「Uncaught RangeError: Maximum call stack size exceeded.」のエラーが発生し続け、画面フリーズ。。アクティビティモニタで強制終了させました。

Chromeのデベロッパーツールでログを確認すると、以下でエラーが出ていました。

モーダルをフォーカスする際にコールスタックが無限に積まれ続けているみたいです。

つまり、無限に再帰呼び出ししているため、エラーが起きているようです。

 

「Uncaught RangeError: Maximum call stack size exceeded.」が発生した原因

モーダル 押下時にエラーが発生しているということで、該当箇所のソースコードを確認します。

<v-btn>でクッリクするとバインドされてモーダル が表示されるのですが、v-forの中にv-dialogのDOMが生成されているため、テーブルにあるデータ分だけ存在してしまっているのです。

データが一個の場合は問題ないのですが、2つ以上になるとv-modelのdelete-dialogが重複してしまうため、エラーが起きていたというわけです。

つまり、今回のようにテーブル内に動的にデータが生成される場合は、delete-dialogを変数にして動的にするか、モーダルをテーブルの外(v-forの外)に出すかしなければなりません。

 

「Uncaught RangeError: Maximum call stack size exceeded.」の解決策

というわけで、今回はモーダルをテーブルの外に出し、以下のように修正しました。