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

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

Lors du développement avec Vue, nous rencontrons souvent des erreurs. Parmi eux, TypeError : Cannot read property 'XXX' of null est un type d'erreur courant. Cette erreur se produit généralement lors de l’utilisation d’une propriété d’un objet, mais l’objet est nul ou indéfini.

Alors, comment devons-nous gérer cette erreur lorsque nous la rencontrons ?

Tout d’abord, nous devons clarifier la cause de cette erreur. TypeError : Impossible de lire la propriété 'XXX' de null signifie que nous essayons d'accéder à la propriété d'un objet null. Cela signifie que lorsque nous accédons aux propriétés de l'objet, nous ne jugeons ni ne gérons efficacement si l'objet est nul ou indéfini.

Afin de résoudre ce problème, nous pouvons utiliser les méthodes suivantes :

1. Utilisez v-if ou v-show pour le jugement conditionnel

Dans le modèle Vue, nous pouvons utiliser la directive v-if ou v-show Jugement conditionnel. En ajoutant une condition à l'endroit où la propriété est accessible, nous pouvons garantir que la propriété n'est accessible que si l'objet n'est pas nul ou indéfini.

Par exemple, dans le modèle, nous pouvons écrire comme ceci :

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

De cette façon, lorsque l'objet est nul, le contenu du modèle ne sera pas rendu, évitant ainsi l'erreur d'accès à l'objet nul.

2. Utilisez des expressions ternaires pour le jugement conditionnel

En plus d'utiliser v-if ou v-show pour le jugement conditionnel, nous pouvons également utiliser des expressions ternaires pour le jugement conditionnel. En utilisant une expression ternaire où l'on accède à la propriété, nous pouvons utiliser une valeur par défaut si l'objet est nul ou indéfini.

Par exemple, dans le composant Vue, nous pouvons écrire comme ceci :

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

Dans le modèle, nous pouvons accéder à l'attribut calculé comme un attribut de données normal :

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

Lorsque l'objet est nul, l'attribut calculé renverra une valeur par défaut value, cela évite les erreurs lors de l'accès aux objets nuls.

3. Utiliser le chaînage facultatif

Pour les projets avec une version de Vue supérieure à 2.0, nous pouvons également utiliser le chaînage facultatif pour gérer cette erreur. L'opérateur de chaîne facultatif peut déterminer automatiquement si l'objet est nul ou indéfini lors de l'accès aux propriétés de l'objet, et renvoyer undéfini si l'objet est nul ou indéfini.

Par exemple, dans le composant Vue, nous pouvons écrire comme ceci :

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

Dans le modèle, nous pouvons accéder à la propriété calculée comme une propriété de données normale :

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

Lorsque l'objet est nul, la propriété calculée renverra undéfini, évitant ainsi Une erreur s'est produite lors de l'accès à un objet nul.

Pour résumer, lorsque nous rencontrons l'erreur TypeError : Impossible de lire la propriété 'XXX' de null dans Vue, nous pouvons utiliser v-if ou v-show pour le jugement conditionnel, utiliser des expressions ternaires pour le jugement conditionnel ou utiliser un opérateur de chaînage facultatif pour l’accès aux attributs. Ces méthodes peuvent gérer efficacement l'erreur et assurer le fonctionnement normal de notre application.

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!