TypeError: Vue で null のプロパティ 'XXX' を読み取れません。どのように対処すればよいですか?

Vue は、最新の対話型 Web アプリケーションを構築するために多くの開発者によって使用されている人気のある JavaScript フレームワークです。ただし、Vue で使用すると、TypeError: Cannot read property 'XXX' of null 例外が発生する可能性があります。この記事では、この問題の根本原因とその解決方法を探っていきます。

問題の根本原因

Vue では、リアクティブ データをよく使用します。つまり、データが変更されると、Vue は自動的にビューを更新します。ただし、場合によっては、null または未定義のオブジェクトまたは配列からプロパティまたは要素にアクセスすると、例外が発生することがあります。

たとえば、データ オブジェクト person があり、これには名前属性 name と趣味配列趣味が含まれています。 person.hobbies[0] にアクセスしようとしたが、person オブジェクト自体が null または未定義の場合、JavaScript は TypeError 例外をスローし、「null のプロパティ '0' を読み取れません」というプロンプトを表示します。

回避策

1. データが null または未定義かどうかを確認します

データ オブジェクトが存在するかどうかを確認し、試行しているすべてのプロパティが含まれていることを確認します。または要素にアクセスします。このような状況は、if ステートメントまたは条件演算子を使用してスクリプトで処理できます。

例:

if(person && person.hobbies && person.hobbies.length > 0){
console.log(person.hobbies[0]);
}

2. デフォルト値を使用する

データ オブジェクトが存在することを確認できない場合、またはアクセスするたびに確認したくない場合は、次のように使用できます。デフォルト値。 Vue のテンプレートでは、v-if または v-show ディレクティブを使用して、レンダリング中に存在しないオブジェクトへのアクセスを回避できます。

たとえば、Vue テンプレートのデフォルト値を使用します:

{{ person && person.hobbies ? person.hobbies[0] : 'none' }}

この式は、person.hobbies[0] の値、または person が存在しない場合や趣味が存在しない場合はデフォルト値 'none' をレンダリングできます。

3. 計算属性の合理的な使用

Vue の計算属性 computed を使用すると、この問題を完全に回避できます。計算属性のデータのデフォルト値または数値を処理できます。 。計算されたプロパティにアクセスするときに、データ オブジェクトが存在しない場合、Vue は自動的にそれを処理し、デフォルト値を返します。

例:

computed:{
firstHobby(){

  return this.person && this.person.hobbies ? this.person.hobbies[0] : 'none';

}
}

次に、これにアクセスします。 firstHobby 、人または趣味が存在しない場合、Vue は自動的にデフォルト値 'none' を返します。

つまり、Vue アプリケーションで TypeError: Cannot read property 'XXX' of nullException が発生した場合、データ オブジェクトが存在するかどうかを確認し、if ステートメント、v-if/v-show を適切に適用できます。 . ディレクティブ、デフォルト値、または計算されたプロパティ。これらの回避策を使用すると、データ オブジェクトの有効性をより確実に確保し、例外を防止し、アプリケーションの安定性を向上させることができます。

以上がTypeError: Vue で null のプロパティ 'XXX' を読み取れません。どのように対処すればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。