TypeError dans Vue : impossible de lire la propriété « XXX » de non définie, quelles sont les solutions ?

Vue, en tant que framework front-end populaire, est souvent utilisé pour développer des applications Web. Cependant, pendant le processus de développement à l'aide de Vue, des erreurs telles que « TypeError : Cannot read property 'XXX' of undefined » peuvent parfois survenir. Lorsque cette erreur se produit, comment devons-nous la résoudre ? Cet article explique comment résoudre cette erreur.

Tout d'abord, comprenons ce qu'est l'erreur « TypeError : Impossible de lire la propriété « XXX » d'undéfini ». Cette erreur est généralement provoquée par l'accès à une propriété ou une méthode non définie dans le code. Par exemple, dans un composant Vue, nous pouvons rencontrer une situation dans laquelle une propriété de données non définie est accédée dans le composant, comme indiqué ci-dessous :

export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message.toUpperCase()); // TypeError: Cannot read property 'toUpperCase' of undefined
    }
  }
}

Dans la méthode showMessage du code ci-dessus, une tentative est faite pour accéder à une propriété inexistante. propriété this. message.toUpperCase(), donc l'erreur "TypeError : Impossible de lire la propriété 'toUpperCase' d'undéfini" sera générée.

Ensuite, nous présenterons des moyens de résoudre cette erreur.

1. Vérifiez si l'objet est défini

Tout d'abord, vérifiez si l'objet accédé dans le code est défini, sinon, l'erreur sera générée. Par conséquent, nous devons utiliser une instruction if ou l'opérateur ternaire pour garantir que l'objet est défini.

export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    showMessage() {
      if (this.message) {
        console.log(this.message.toUpperCase());
      }
    }
  }
}

Dans le code ci-dessus, nous utilisons l'instruction if pour vérifier si this.message a été défini. Ce n'est que lorsque this.message est défini que l'instruction console.log sera exécutée.

2. Utilisez l'opérateur de chaîne facultatif (?.)

Dans Vue3.0 et supérieur, vous pouvez utiliser l'opérateur de chaîne facultatif (?.) pour éviter d'accéder à des propriétés ou des méthodes non définies. Cet opérateur signifie que si l'expression de gauche est indéfinie ou nulle, l'expression de droite ne sera pas exécutée.

export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message?.toUpperCase()); // 如果this.message未定义，则不会执行toUpperCase()方法
    }
  }
}

Dans le code ci-dessus, nous utilisons l'opérateur de chaîne facultatif (?.) pour accéder à la propriété this.message. Si this.message n'est pas défini, la méthode toUpperCase() ne sera pas exécutée, donc une TypeError ne sera pas levée. .

3. Utiliser les valeurs par défaut

Vous pouvez également utiliser des valeurs par défaut lors de l'accès à des propriétés ou des méthodes non définies pour éviter de générer des erreurs TypeError.

export default {
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    showMessage() {
      console.log((this.message || '').toUpperCase()); // 如果this.message未定义，则返回空字符串
    }
  }
}

Dans le code ci-dessus, nous utilisons l'opérateur OR (||) pour définir la valeur par défaut (chaîne vide) pour this.message afin d'éviter de générer des erreurs TypeError.

Pour résumer, lorsque l'erreur « TypeError : Impossible de lire la propriété 'XXX' de undéfini » se produit, nous pouvons utiliser les trois méthodes ci-dessus pour résoudre l'erreur. Lors de l'écriture du code Vue, veillez à vérifier si l'objet est défini pour éviter de telles 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!