Comment résoudre le problème « Impossible de lire la propriété « aaa » de non définie » dans l'application Vue ?

Dans le développement d'applications Vue, nous rencontrons souvent des erreurs en JavaScript. Parmi elles, l'une des erreurs les plus courantes est « Impossible de lire la propriété 'yyy' d'undéfini". Ce message d'erreur signifie généralement que nous essayons d'accéder à un objet ou une propriété non définie. Alors, comment devrions-nous résoudre ce problème lorsque nous rencontrons ce problème dans une application Vue ?

1. Qu'est-ce que l'erreur « Impossible de lire la propriété « aaa » non définie » ?

Dans une application Vue, lorsque nous accédons à une variable ou à une propriété d'objet non définie, une erreur "Impossible de lire la propriété 'aaa' de non définie" se produit. Par exemple, il y a un objet non défini « personne » dans le code suivant, et nous essayons d'accéder à sa propriété « nom » :

let person;
console.log(person.name); // 抛出 "Cannot read property 'name' of undefined" 错误

2. Comment résoudre l'erreur « Impossible de lire la propriété « yyy » d'un défini » ?

1. Assurez-vous que l'objet a été correctement défini

Dans une application Vue, nous devons nous assurer que l'objet est correctement défini pour éviter l'erreur "Impossible de lire la propriété 'yyy' d'undéfini". Par exemple, dans le code suivant, nous définissons un objet vide "personne", mais nous ne définissons pas l'attribut "name" pour celui-ci :

let person = {};
console.log(person.name); // 抛出 "Cannot read property 'name' of undefined" 错误

Pour résoudre ce problème, nous devons définir l'attribut "name" pour la "personne". " objet, Comme indiqué ci-dessous :

let person = { name: '张三' };
console.log(person.name); // 输出 "张三"

2. Utilisez v-if ou v-show pour vérifier si l'objet a été défini

Dans l'application Vue, nous pouvons utiliser v-if ou v-show pour vérifier si l'objet a été définie. Par exemple, dans le code suivant, nous utilisons v-if pour vérifier si l'objet "person" est déjà défini :

<div v-if="person">{{ person.name }}</div>

Si l'objet "person" n'est pas défini, cet élément

<ul>
  <li v-for="person in persons">{{ person.name }}</li>
</ul>

<p v-bind:textContent="person.name"></p>

computed: {
  personExists: function() {
    return this.person !== undefined;
  }
}

<div v-if="personExists">{{ person.name }}</div>