Que dois-je faire si « Impossible de lire la propriété 'xxx' de null » apparaît lors de l'utilisation d'axios dans une application Vue ?

Ces dernières années, le framework front-end Vue est devenu de plus en plus populaire, et il devient de plus en plus courant d'utiliser axios pour les requêtes de données dans les applications Vue. Cependant, lors de l'utilisation d'axios, vous pouvez rencontrer des erreurs, telles que « Impossible de lire la propriété 'xxx' de null ». Cette erreur nous a causé beaucoup de problèmes car elle n’a pas donné de message clair. Examinons la cause et la solution de cette erreur.

Tout d’abord, parlons de la signification de cette erreur. Généralement, cette erreur est provoquée par l'accès à une propriété sur un objet vide dans un composant Vue. Par exemple, le code suivant :

<template>
  <div>{{user.name}}</div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: null
    }
  },
  created() {
    axios.get('/api/user')
      .then(res => {
        this.user = res.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

Dans cet exemple, nous définissons une variable user dans l'option data du composant, avec une valeur initiale de null. Dans la fonction hook créée, nous utilisons axios pour envoyer une requête afin d'obtenir des données utilisateur et attribuer les données à la variable utilisateur. Dans le modèle de composant, nous utilisons {{user.name}} pour afficher le nom d'utilisateur, mais cela provoquera une erreur "Impossible de lire la propriété 'nom' de null".

Alors, comment éviter cette erreur ? Il existe deux méthodes :

1. Utilisez la directive v-if pour déterminer si l'objet est vide. S'il est vide, aucun accès aux attributs ne sera effectué :

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

<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: null
    }
  },
  created() {
    axios.get('/api/user')
      .then(res => {
        this.user = res.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

Dans cet exemple, nous utilisons la directive v-if dans le modèle de composant pour déterminer l'utilisateur s'il est vide, s'il est vide, aucun accès aux attributs ne sera effectué. De cette façon, l’erreur ci-dessus ne se produira pas.

2. Définissez les valeurs par défaut des objets pour éviter null :

<template>
  <div>{{user.name}}</div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      user: {
        name: ''
      }
    }
  },
  created() {
    axios.get('/api/user')
      .then(res => {
        this.user = res.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

Dans cet exemple, nous définissons un objet utilisateur avec une valeur par défaut de {name: ''} dans l'option data du composant, de sorte que même si la requête axios échoue ou renvoie un objet nul, et nous ne rencontrerons pas l'erreur "Impossible de lire la propriété 'nom' de null".

Pour résumer, lorsque vous utilisez axios pour effectuer des requêtes de données dans les applications Vue, vous pouvez rencontrer l'erreur "Impossible de lire la propriété 'xxx' de null". La cause de cette erreur est l'accès aux attributs à un objet vide. Nous pouvons utiliser l'instruction v-if pour porter des jugements ou définir une valeur par défaut pour l'objet afin d'éviter cette erreur.

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!