Vue アプリケーションで「TypeError: null のプロパティ 'xxx' を読み取れません」を解決するにはどうすればよいですか?-Vue.js-php.cn

Vue アプリケーションで「TypeError: null のプロパティ 'xxx' を読み取れません」を解決するにはどうすればよいですか?

WBOY

リリース： 2023-08-18 17:25:03

オリジナル

6384 人が閲覧しました

$在Vue应用中遇到“TypeError: Cannot read property \'xxx\' of null”怎么解决？$

Vue アプリケーションでは、開発者は「TypeError: Cannot read property 'xxx' of null」エラーに遭遇することがよくあります。「xxx」は任意の変数、プロパティ、またはメソッド名に置き換えることができます。このエラーは通常、 null または未定義の変数、プロパティ、またはメソッドにアクセスするときに発生します。この記事では、このエラーの原因について詳しく説明し、参考として考えられる 3 つの解決策を紹介します。

このエラーの原因:

1. 未定義の変数、プロパティ、またはメソッドへのアクセス

Vue フレームワークを使用してアプリケーションを開発する場合、いくつかの変数、プロパティ、またはメソッドを定義することがあります。メソッドを作成し、コード内でアクセスします。ただし、これらの変数、プロパティ、またはメソッドにアクセスする前に定義していない場合、または定義されていてもスペルが間違っている場合には、このエラーが発生します。

たとえば、次のコードでは、変数 "name" が定義されていないため、"name" にアクセスすると、「TypeError: Cannot read property 'name' of null error:

<template>
  <div>{{name}}</div>
</template>

<script>
export default{
  data(){
    return {
      age: 18,
      gender: 'male',
    }
  }
}
</script>

ログイン後にコピー

##」が報告されます。 #2. 非同期でデータをロードする場合データを先にロードする状況を考慮していない

もう 1 つの理由は、データを非同期でレンダリングする場合、データを先にロードする状況を考慮していない場合にこのエラーが発生することです。以下に示すように:

<template>
  <div>{{user.name}}</div>
</template>

<script>
export default{
  data(){
    return {
      user: null,
    }
  },
  created(){
    this.fetchData();
  },
  methods: {
    fetchData(){
      this.$http.get('/user').then(response => {
        this.user = response.data;
      });
    }
  }
}
</script>

ログイン後にコピー

データの非同期読み込みを使用する場合は、最初に必ず「user」変数に値を割り当てる必要があります。そうしないと、「user.name」にアクセスすると TypeError: Cannot read property が報告されます。 null エラーの「名前」。

3. コンポーネントをネストするときに Props は渡されません

Vue アプリケーションでは、コードを整理するためにコンポーネントのネストをよく使用します。親コンポーネントで変数またはプロパティが定義され、子コンポーネントに渡される場合、変数またはプロパティが渡されないと、子コンポーネントは null 値にアクセスし、このエラーが発生します。たとえば、次のコードでは、子コンポーネント「child-component」に「message」属性がありません。

<!-- Parent Component -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default{
  components: {
    ChildComponent,
  },
  data(){
    return {
      message: 'Hello World!',
    }
  }
}
</script>

<!-- Child Component -->
<template>
  <div>{{message}}</div>
</template>

<script>
export default{
  props: [],
  data(){
    return {
      name: 'Alice',
    }
  }
}
</script>

ログイン後にコピー

上の例では、親コンポーネントがロードされると、子コンポーネント「props」が定義されていないため、子コンポーネントは null です。そのため、子コンポーネントに渡されたプロパティを受信できず、「message」にアクセスすると、「TypeError: Cannot read property 'message' of null」エラーが発生します。

解決策:

1. 変数、プロパティ、メソッドにアクセスする前に、変数、プロパティ、またはメソッドが正しく定義されていることを確認してください。

データモデルまたはメソッドで定義できます。 Vue コンポーネントの変数、プロパティ、またはメソッドを使用する場合は、コード内でアクセスする前に、それらが正しく定義され、綴りが正しいことを確認してください。以下に示すように:

<template>
  <div>{{name}}</div>
</template>

<script>
export default{
  data(){
    return {
      name: 'Alice',
      age: 18,
      gender: 'female',
    }
  }
}
</script>

ログイン後にコピー

2. データをレンダリングする前に、データがロードされていることを確認してください

データの非同期ロードを使用する場合は、レンダリング前にデータがロードされていることを確認する必要があります。以下に示すように、作成したフックでこれを実行することも、マウントされたフックで非同期メソッドを使用することもできます:

<template>
  <div>{{user.name}}</div>
</template>

<script>
export default{
  data(){
    return {
      user: null,
    }
  },
  created(){
    this.fetchData();
  },
  methods: {
    async fetchData(){
      const response = await this.$http.get('/user');
      this.user = response.data;
    }
  }
}
</script>

ログイン後にコピー

データを非同期でロードする場合、作成されたフックまたはマウントされたフックで非同期メソッドを使用して、データが確実にロードされるようにすることができます。レンダリング前にロードされています。上記のコードでは、async と await を使用して $http.get() メソッドをカプセル化し、データがロードされる前にメソッドがレンダリングされないようにしています。

3. 属性を渡すときは、子コンポーネントが属性を定義していることを確認してください。

親コンポーネントで属性を定義し、子コンポーネントに渡すときは、子コンポーネントが属性を定義しました。以下に示すように、props を使用してサブコンポーネントのプロパティを定義できます:

<!-- Parent Component -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default{
  components: {
    ChildComponent,
  },
  data(){
    return {
      message: 'Hello World!',
    }
  }
}
</script>

<!-- Child Component -->
<template>
  <div>{{message}}</div>
</template>

<script>
export default{
  props: {
    message: {
      type: String,
      required: true,
    }
  },
  data(){
    return {
      name: 'Alice',
    }
  }
}
</script>

ログイン後にコピー

上記のコードでは、props を使用してサブコンポーネントの「message」プロパティを定義します。親コンポーネントはこのプロパティを渡します。プロパティが定義されていることを確認する必要があります。定義されていない場合は、「TypeError: Cannot read property 'xxx' of null」エラーが発生します。

概要:

Vue アプリケーションでは、変数、プロパティ、メソッドを使用してデータとビジネスロジックを処理します。コードを記述するときは、これらの変数、プロパティ、またはメソッドにアクセスするときにそれらが定義されているかどうか、およびそれらのスペルが正しいかどうかに注意する必要があります。データの非同期ロードまたはコンポーネントのネストを使用する場合は、データをレンダリングする前にデータがロードされていることを確認する必要があります。また、プロパティを渡す場合は、子コンポーネントがプロパティを定義していることを確認する必要があります。それでも「TypeError: Cannot read property 'xxx' of null」エラーが発生する場合は、ブラウザコンソールを使用してデバッグし、エラーの原因を見つけて、上記の解決策に従って処理できます。

以上がVue アプリケーションで「TypeError: null のプロパティ 'xxx' を読み取れません」を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。