TypeError : impossible de lire la propriété « XXX » de null dans le développement de Vue, comment y faire face ?

TypeError : Impossible de lire la propriété 'XXX' de null dans le développement de Vue, comment y faire face ?

Après avoir introduit le framework Vue.js, nous rencontrons souvent diverses erreurs lors du processus de développement. L'un des types d'erreurs les plus courants est TypeError, qui est une erreur de type. Surtout lorsque nous essayons de lire les propriétés d'un objet null, l'erreur TypeError: Cannot read property 'XXX' of null se produira. Cet article explique les causes de cette erreur et comment y remédier.

Regardons d’abord un exemple spécifique. Supposons que nous ayons un composant Vue et que nous y utilisions un attribut de données data comme indiqué ci-dessous :

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

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

Dans le code ci-dessus, nous définissons un attribut de données nommé data et définissons sa valeur initiale sur null. Ensuite, dans la fonction hook de cycle de vie montée du composant, nous appelons la méthode loadData pour charger les données de manière asynchrone et stocker les données chargées dans this.data.

Cependant, si le rendu a déjà commencé dans le modèle du composant avant le chargement des données, une TypeError sera générée. Car à ce stade, la valeur de this.data est toujours nulle et nous essayons de lire son attribut info.

Pour résoudre ce problème, vous pouvez essayer plusieurs méthodes.

La première méthode consiste à ajouter un rendu conditionnel dans le modèle, c'est-à-dire à utiliser l'instruction v-if pour déterminer si l'objet de données existe. Si data est nulle, la balise p contenant data.info ne sera pas rendue. L'exemple est le suivant :

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

Dans le code ci-dessus, nous utilisons v-if="data" pour déterminer si data existe. La balise p contenant data.info ne sera rendue que si data n'est pas nulle. De cette façon, lorsque les données sont nulles, une TypeError ne sera pas générée.

La deuxième méthode consiste à utiliser les valeurs par défaut dans les attributs de données. On peut définir un objet vide initial dans l'attribut data comme suit :

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

De cette façon, avant même de charger les données, la valeur de this.data est un objet vide, non nul. Par conséquent, aucune TypeError n’est générée lors de la tentative de lecture de la propriété data.info.

La troisième méthode consiste à utiliser les propriétés calculées dans les modèles. Grâce aux propriétés calculées, nous pouvons juger et convertir des données et renvoyer un objet avec une valeur par défaut. Un exemple est le suivant :

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

Dans le code ci-dessus, nous définissons une propriété calculée normalizedData, qui renvoie l'objet correspondant en déterminant si this.data existe. Si this.data existe, renvoyez this.data sinon, renvoyez un objet avec une valeur par défaut. De cette façon, nous pouvons accéder normalement à la propriété normalizedData.info avant même de charger les données.

Pour résumer, lorsque nous rencontrons l'erreur TypeError: Cannot read property 'XXX' of null dans le développement de Vue, nous pouvons utiliser les méthodes de traitement suivantes : utiliser le rendu conditionnel (v-if) dans le modèle, dans les données Utiliser les valeurs par défaut ​​dans les propriétés, ou utilisez les propriétés calculées dans les modèles. Chacune de ces méthodes peut éviter d'essayer de lire la propriété d'un objet nul, résolvant ainsi l'erreur TypeError. En fonction de la situation, il est important de choisir la méthode appropriée pour gérer les erreurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!