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

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

Vue を使用した開発プロセス中に、エラーが発生することがよくあります。その中でも、「TypeError: Cannot read property 'XXX' of null」はよくあるエラーの種類です。このエラーは通常、オブジェクトのプロパティを使用しているが、オブジェクトが null または未定義である場合に発生します。

それでは、このエラーが発生した場合、どのように対処すればよいのでしょうか?

まず、このエラーの原因を明確にする必要があります。 TypeError: null のプロパティ 'XXX' を読み取れませんは、null オブジェクトのプロパティにアクセスしようとしていることを意味します。これは、オブジェクトのプロパティにアクセスするときに、オブジェクトが null であるか未定義であるかを効果的に判断したり処理したりできないことを意味します。

この問題を解決するには、以下の方法が考えられます。

1. 条件判定に v-if または v-show を使用する

#In Vue テンプレートでは、v-if 命令や v-show 命令を使用して条件判定を行うことができます。プロパティにアクセスする場所に条件を追加すると、オブジェクトが null または未定義でない場合にのみプロパティにアクセスできるようになります。

たとえば、テンプレートでは次のように記述できます:

<div v-if="obj !== null">
  {{ obj.XXX }}
</div>

この方法では、オブジェクトが null の場合、テンプレート内のコンテンツはレンダリングされないため、アクセス時のエラーが回避されます。 null オブジェクト。

条件判定に 3 項式を使用する

条件判定に v-if または v-show を使用するほかに、条件判定 judge に 3 項式を使用することもできます。プロパティにアクセスする場所で 3 項式を使用すると、オブジェクトが null または未定義の場合にデフォルト値を使用できます。

たとえば、Vue コンポーネントでは次のように記述できます:

data() {
  return {
    obj: null
  }
},
computed: {
  objXXX() {
    return this.obj !== null ? this.obj.XXX : 'default value';
  }
}

テンプレートでは、通常のデータ プロパティと同様に計算プロパティにアクセスできます:

<div>
  {{ objXXX }}
</div>

Whenオブジェクト null の場合、計算されたプロパティはデフォルト値を返すため、null オブジェクトへのアクセス時のエラーが回避されます。

オプションの連鎖演算子を使用する (Optional Chaining)

Vue バージョン 2.0 以降のプロジェクトの場合は、オプションの連鎖演算子 (Optional Chaining) を使用することもできます。このエラー。オプションのチェーン演算子は、オブジェクトのプロパティにアクセスするときに、オブジェクトが null か未定義であるかを自動的に判断し、オブジェクトが null または未定義の場合は unknown を返すことができます。

たとえば、Vue コンポーネントでは次のように記述できます:

data() {
  return {
    obj: null
  }
},
computed: {
  objXXX() {
    return this.obj?.XXX;
  }
}

テンプレートでは、通常のデータ プロパティと同様に計算プロパティにアクセスできます:

<div>
  {{ objXXX }}
</div>

Whenオブジェクト null の場合、計算されたプロパティは未定義を返すため、null オブジェクトへのアクセスによるエラーが回避されます。

要約すると、Vue で TypeError: Cannot read property 'XXX' of null エラーが発生した場合、条件判定には v-if または v-show を使用し、条件判定には 3 項式を使用できます。または、属性アクセスにオプションの連鎖演算子を使用します。これらのメソッドはエラーを効果的に処理し、アプリケーションの正常な動作を保証します。

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