VueやNuxtをやっていると必ず引っかかるUnhandled error 関連のエラー本当に困りますよね。
エラー理由もエラー位置も大雑把で参考になりません。
ということでこのエラーの直し方について
といっても、地道に追っていくしかありません。
大まかな方針として、一番有効な方法は、コードを一時的に削除してみて絞り込んでいく手法が有効です。
また、console.log()を埋め込んでみて、どこまで動いているかをみる方法も併用しましょう。
コンポーネントがおかしいというようなログ(コンポーネント名がログにでます）の場合、まずそのコンポーネントを消してみてエラーが出なくなるかチェックします。
消してみてでなくなったらそのコンポーネントが原因で確定でしょう。
ただし、コンポーネントに引数で値を渡している場合は、渡している値が未定義状態になりうるかどうかのチェックが必要です。
次に、ロジックなのかテンプレートなのかの判断ですが、まずテンプレートを全消しして動かしてみましょう。
消してエラーが無くなれば、テンプレート側で使っている変数の何かがおかしいはずなので、一旦テンプレートを元に戻して、変数を使っている箇所を中心に少しずつ消していきましょう。エラーが出なくなった場所(変数）が問題です。
テンプレートを全消ししてもエラーが出る場合、ロジック側に何か問題がある可能性が高いです。
テンプレートの時と同様に１行づつ消してみて、エラーが出なくなる箇所を特定していきましょう。
この方法で、ほぼ原因箇所が特定できるはずです。
それにしても・・・
かなり前時代的な手法。全然モダンじゃない件について。
