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

Vue est un framework JavaScript populaire utilisé par de nombreux développeurs pour créer des applications Web modernes et interactives. Cependant, lorsqu'il est utilisé dans Vue, nous pouvons rencontrer TypeError: Cannot read property 'XXX' of null exception. Dans cet article, nous explorerons les causes profondes de ce problème et comment le résoudre.

Cause première du problème

Dans Vue, nous utilisons souvent des données réactives, ce qui signifie que lorsque les données changent, Vue mettra automatiquement à jour la vue. Cependant, dans certains cas, nous pouvons accéder à une propriété ou à un élément à partir d'un objet ou d'un tableau nul ou non défini, ce qui provoquera une exception.

Par exemple, nous avons un objet de données personne, qui contient un nom d'attribut de nom et un tableau de passe-temps. Si nous essayons d'accéder à person.hobbies[0], mais que l'objet personne lui-même est nul ou indéfini, JavaScript lancera une exception TypeError, invitant "impossible de lire la propriété '0' de null".

Solution de contournement

1. Vérifiez si les données sont nulles ou non définies

Vérifiez si l'objet de données existe et assurez-vous qu'il contient toutes les propriétés ou éléments auxquels vous essayez d'accéder. Ces situations peuvent être gérées dans des scripts utilisant des instructions if ou des opérateurs conditionnels.

Par exemple :

if(person && person.hobbies && person.hobbies.length > 0){
console.log(person.hobbies[0]);
}

2. Utiliser la valeur par défaut

Si vous n'avez aucun moyen de garantir que l'objet de données existe ou si vous ne souhaitez pas vérifier à chaque fois que vous y accédez, vous pouvez utiliser la valeur par défaut. Dans les modèles de Vue, vous pouvez utiliser la directive v-if ou v-show pour éviter d'accéder à des objets inexistants pendant le rendu.

Par exemple, utilisez la valeur par défaut dans le modèle Vue :

{{ person && person.hobbies ? person.hobbies[0] : 'none' }}

Cette expression peut restituer la valeur person.hobbies[0], si la personne n'existe pas ou si les passe-temps n'existent pas, une valeur par défaut de « aucun » sera affichée.

3. Utilisation appropriée de l'attribut calculé

L'attribut calculé de Vue peut parfaitement éviter ce problème. Nous pouvons gérer la valeur par défaut ou la valeur numérique des données dans l'attribut calculé. Lorsque nous accédons à une propriété calculée, si l'objet de données n'existe pas, Vue le gérera automatiquement et renverra une valeur par défaut.

Par exemple :

computed :{
firstHobby(){

  return this.person && this.person.hobbies ? this.person.hobbies[0] : 'none';

}
}

Maintenant, lorsque nous accédons à this.firstHobby, si la personne ou les passe-temps n'existent pas, Vue renverra automatiquement la valeur par défaut de « aucun » '.

En bref, lorsque nous rencontrons une TypeError: Cannot read property 'XXX' of null exception dans une application Vue, nous pouvons vérifier si l'objet de données existe et appliquer raisonnablement les instructions if, les instructions v-if/v-show et valeurs par défaut ou propriétés calculées. Grâce à ces solutions de contournement, nous pouvons mieux garantir la validité des objets de données, empêcher les exceptions et améliorer la stabilité de nos applications.

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!