TypeError: Die Eigenschaft „XXX“ von null kann in der Vue-Entwicklung nicht gelesen werden. Wie gehe ich damit um?

TypeError: Die Eigenschaft „XXX“ von null kann in der Vue-Entwicklung nicht gelesen werden. Wie gehe ich damit um?

Nach der Einführung des Vue.js-Frameworks stoßen wir während des Entwicklungsprozesses häufig auf verschiedene Fehler. Einer der häufigsten Fehlertypen ist TypeError, ein Typfehler. Insbesondere wenn wir versuchen, die Eigenschaften eines Nullobjekts zu lesen, tritt der Fehler TypeError: Cannot read property 'XXX' of null auf. In diesem Artikel werden die Ursachen dieses Fehlers und die Behebung erläutert.

Schauen wir uns zunächst ein konkretes Beispiel an. Angenommen, wir haben eine Vue-Komponente und verwenden darin ein Datenattribut data wie unten gezeigt:

<template>
  <div>
    <p>{{ data.info }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 省略异步加载数据的代码
      // 假设数据加载成功后，将this.data赋值为一个包含info属性的对象
    }
  }
};
</script>

Im obigen Code definieren wir ein Datenattribut namens data und setzen seinen Anfangswert auf null. Anschließend rufen wir in der gemounteten Lebenszyklus-Hook-Funktion der Komponente die Methode „loadData“ auf, um Daten asynchron zu laden und die geladenen Daten in „this.data“ zu speichern.

Wenn jedoch das Rendern in der Vorlage der Komponente bereits begonnen hat, bevor die Daten geladen werden, wird ein TypeError ausgelöst. Denn zu diesem Zeitpunkt ist der Wert von this.data immer noch null und wir versuchen, sein Info-Attribut zu lesen.

Um dieses Problem zu lösen, können Sie verschiedene Methoden ausprobieren.

Die erste Methode besteht darin, der Vorlage ein bedingtes Rendering hinzuzufügen, das heißt, die V-IF-Anweisung zu verwenden, um zu bestimmen, ob ein Datenobjekt vorhanden ist. Wenn data null ist, wird das p-Tag, das data.info enthält, nicht gerendert. Das Beispiel sieht wie folgt aus:

<template>
  <div>
    <p v-if="data">{{ data.info }}</p>
  </div>
</template>

Im obigen Code verwenden wir v-if="data", um zu bestimmen, ob Daten vorhanden sind. Das p-Tag mit data.info wird nur gerendert, wenn data nicht null ist. Wenn die Daten null sind, wird auf diese Weise kein TypeError ausgelöst.

Die zweite Methode besteht darin, Standardwerte in Datenattributen zu verwenden. Wir können ein anfängliches leeres Objekt im Datenattribut wie folgt definieren:

data() {
  return {
    data: {}
  };
},

Auf diese Weise ist der Wert von this.data bereits vor dem Laden der Daten ein leeres Objekt und nicht null. Daher wird beim Versuch, die data.info-Eigenschaft zu lesen, kein TypeError ausgelöst.

Die dritte Möglichkeit besteht darin, berechnete Eigenschaften in Vorlagen zu verwenden. Durch berechnete Eigenschaften können wir Daten beurteilen und konvertieren und ein Objekt mit einem Standardwert zurückgeben. Ein Beispiel ist wie folgt:

<template>
  <div>
    <p>{{ normalizedData.info }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  computed: {
    normalizedData() {
      if (this.data) {
        return this.data;
      } else {
        return {
          info: ""
        };
      }
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      // 省略异步加载数据的代码
    }
  }
};
</script>

Im obigen Code definieren wir eine berechnete Eigenschaft normalizedData, die das entsprechende Objekt zurückgibt, indem sie bestimmt, ob this.data existiert. Wenn „this.data“ vorhanden ist, geben Sie „this.data“ zurück. Andernfalls geben Sie ein Objekt mit einem Standardwert zurück. Auf diese Weise können wir bereits vor dem Laden der Daten normal auf die Eigenschaft normalizedData.info zugreifen.

Zusammenfassend lässt sich sagen, dass wir beim Auftreten des Fehlers TypeError: Cannot read property 'XXX' of null in der Vue-Entwicklung die folgenden Verarbeitungsmethoden anwenden können: Verwenden Sie bedingtes Rendern (v-if) in der Vorlage und in den Daten. Verwenden Sie Standardwerte ​​in Eigenschaften oder verwenden Sie berechnete Eigenschaften in Vorlagen. Jede dieser Methoden kann den Versuch vermeiden, die Eigenschaft eines Nullobjekts zu lesen, und so den TypeError-Fehler beheben. Je nach Situation ist es wichtig, die geeignete Methode zur Fehlerbehandlung zu wählen.

Das obige ist der detaillierte Inhalt vonTypeError: Die Eigenschaft „XXX“ von null kann in der Vue-Entwicklung nicht gelesen werden. Wie gehe ich damit um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!