Wie löse ich „TypeError: Eigenschaft ‚xxx' von Null kann nicht gelesen werden' in der Vue-Anwendung?

In Vue-Anwendungen stoßen Entwickler häufig auf den Fehler TypeError: Cannot read property 'xxx' of null, wobei "xxx" durch einen beliebigen Variablen-, Eigenschafts- oder Methodennamen ersetzt werden kann. Dieser Fehler tritt im Allgemeinen auf, wenn auf einen Nullwert oder eine undefinierte Variable zugegriffen wird , Eigenschaft oder Methode. In diesem Artikel werden wir die Ursachen dieses Fehlers im Detail besprechen und drei mögliche Lösungen als Referenz anbieten.

Ursachen für diesen Fehler:

1. Zugriff auf undefinierte Variablen, Eigenschaften oder Methoden

Wenn wir das Vue-Framework zum Entwickeln von Anwendungen verwenden, definieren wir manchmal einige Variablen, Eigenschaften oder Methoden im Datenmodell und verwenden sie im Codezugriff In. Wenn wir diese Variablen, Eigenschaften oder Methoden jedoch nicht definieren, bevor wir darauf zugreifen, oder wenn sie definiert, aber falsch geschrieben sind, tritt dieser Fehler auf.

Im folgenden Code wurde beispielsweise die Variable „name“ nicht definiert, daher wird beim Zugriff auf „name“ ein TypeError: Cannot read property 'name' of null-Fehler gemeldet:

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

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

2 Beim asynchronen Laden von Daten wird Folgendes angezeigt: Das erste Laden der Daten wird nicht berücksichtigt

Ein weiterer Grund ist, dass beim asynchronen Rendern von Daten dieser Fehler auftritt, wenn die Daten zuerst geladen werden. Wie unten gezeigt:

<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>

Wenn wir das asynchrone Laden von Daten verwenden, müssen wir sicherstellen, dass wir zuerst der Variablen „user“ einen Wert zuweisen, andernfalls wird beim Zugriff auf „user.name“ ein TypeError gemeldet: Eigenschaft „Name“ kann nicht gelesen werden Nullfehler.

3. Beim Verschachteln von Komponenten werden keine Requisiten übergeben

In Vue-Anwendungen verwenden wir häufig die Komponentenverschachtelung, um Code zu organisieren. Wenn eine Variable oder Eigenschaft in der übergeordneten Komponente definiert und an die untergeordnete Komponente übergeben wird und die Variable oder Eigenschaft nicht übergeben wird, greift die untergeordnete Komponente auf einen Nullwert zu und dieser Fehler tritt auf. Im folgenden Code fehlt beispielsweise der untergeordneten Komponente „child-component“ das „message“-Attribut:

<!-- 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>

Im obigen Beispiel ist die von der untergeordneten Komponente definierte Variable „message“ null, wenn die übergeordnete Komponente geladen wird Da die untergeordnete Komponente „props“ nicht definiert, kann die an sie übergebene Eigenschaft nicht empfangen werden, was beim Zugriff auf „message“ zu einem TypeError: Cannot read property 'message' of null-Fehler führt.

Lösung:

1. Stellen Sie vor dem Zugriff auf Variablen, Eigenschaften oder Methoden sicher, dass diese korrekt definiert und geschrieben sind.

Wir können Variablen, Eigenschaften oder Methoden im Datenmodell oder in den Methoden der Vue-Komponente definieren und sicherstellen, dass auf diese zugegriffen wird in den Codevariablen, Eigenschaften oder Methoden, bevor sie definiert und korrekt geschrieben wurden. Wie unten gezeigt:

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

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

2. Stellen Sie vor dem Rendern der Daten sicher, dass die Daten geladen wurden.

Wenn wir das asynchrone Laden von Daten verwenden, müssen wir sicherstellen, dass die Daten vor dem Rendern geladen werden. Sie können die asynchrone Methode verwenden der erstellte oder gemountete Hook, wie unten gezeigt:

<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>

Beim asynchronen Laden von Daten können wir die asynchrone Methode im erstellten oder gemounteten Hook verwenden, um sicherzustellen, dass die Daten vor dem Rendern geladen werden. Im obigen Code verwenden wir „async“ und „await“, um die Methode „$http.get()“ zu kapseln und sicherzustellen, dass sie nicht gerendert wird, bevor die Daten geladen sind.

3. Stellen Sie sicher, dass die untergeordnete Komponente das Attribut definiert hat.

Wenn Sie Attribute in der übergeordneten Komponente definieren und an die untergeordnete Komponente übergeben, müssen Sie sicherstellen, dass die untergeordnete Komponente das Attribut definiert hat Sie können Requisiten verwenden, um die Eigenschaften der untergeordneten Komponente zu definieren, wie unten gezeigt:

<!-- 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>

Im obigen Code verwenden wir Requisiten, um die Eigenschaft „Nachricht“ der Unterkomponente zu definieren Die Eigenschaft wurde definiert, andernfalls tritt ein TypeError auf: Eigenschaft „xxx“ von null kann nicht gelesen werden.

Zusammenfassung:

In Vue-Anwendungen verwenden wir Variablen, Eigenschaften und Methoden, um Daten und Geschäftslogik zu verarbeiten. Beim Schreiben von Code müssen Sie darauf achten, ob diese Variablen, Eigenschaften oder Methoden beim Zugriff definiert wurden und ob sie richtig geschrieben sind. Wenn wir asynchrones Laden von Daten oder Komponentenverschachtelung verwenden, müssen wir sicherstellen, dass die Daten geladen werden, bevor sie gerendert werden, und wenn wir eine Eigenschaft übergeben, müssen wir sicherstellen, dass die untergeordnete Komponente die Eigenschaft definiert hat. Wenn weiterhin der Fehler TypeError: Cannot read property 'xxx' of null auftritt, können wir die Browserkonsole zum Debuggen verwenden, die Fehlerquelle finden und ihn dann gemäß den oben genannten Lösungen behandeln.

Das obige ist der detaillierte Inhalt vonWie löse ich „TypeError: Eigenschaft ‚xxx' von Null kann nicht gelesen werden' in der Vue-Anwendung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!