月: 2020年1月

Vue.jsで「Uncaught RangeError: Maximum call stack size exceeded.」のエラーが発生したので、その原因と解決策をメモしておきます。 「Uncaught RangeError: Maximum call stack size exceeded.」による症状 モーダルを押下した際に「Uncaught RangeError: Maximum call stack size exceeded.」のエラーが発生し続け、画面フリーズ。。アクティビティモニタで強制終了させました。 Chromeのデベロッパーツールでログを確認すると、以下でエラーが出ていました。 [crayon-67173ab2c21c6829780428/] モーダルをフォーカスする際にコールスタックが無限に積まれ続けているみたいです。 つまり、無限に再帰呼び出ししているため、エラーが起きているようです。 「Uncaught RangeError: Maximum call stack size exceeded.」が発生した原因 モーダル 押下時にエラーが発生しているということで、該当箇所のソースコードを確認します。 [crayon-67173ab2c21c9545910424/] &lt;v-btn&gt;でクッリクするとバインドされてモーダル が表示されるのですが、v-forの中にv-dialogのDOMが生成されているため、テーブルにあるデータ分だけ存在してしまっているのです。 データが一個の場合は問題ないのですが、2つ以上になるとv-modelのdelete-dialogが重複してしまうため、エラーが起きていたというわけです。 つまり、今回のようにテーブル内に動的にデータが生成される場合は、delete-dialogを変数にして動的にするか、モーダルをテーブルの外(v-forの外)に出すかしなければなりません。 「Uncaught RangeError: Maximum call stack size exceeded.」の解決策 というわけで、今回はモーダルをテーブルの外に出し、以下のように修正しました。 [crayon-67173ab2c21ca618810358/]

月: 2020年1月

【Vue.js】Webhookを使ってMicrosoft Teamsにメッセージを送る

Vue.jsとFirebaseでユーザ認証を実装する方法

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