web-dev-qa-db-fra.com

vue: Uncaught TypeError: Impossible de lire la propriété ... de non définie

J'utilise [email protected] et le modèle officiel Webpack de vue pour créer une application.

Lors du développement local, je vois souvent l'avertissement Uncaught TypeError: Cannot read property ... of undefined, mais le code HTML peut être restitué correctement. Cependant, le code HTML ne peut pas être rendu lorsqu'il est déployé sur Netlify avec la commande npm run build. Je dois donc traiter cet avertissement avec sérieux.

J'ai appris de ici que c'est parce que "les données ne sont pas complètes au moment du rendu du composant, mais sont chargées, par exemple, à partir d'une API". et la solution consiste à "utiliser v-if pour rendre cette partie du modèle uniquement une fois les données chargées."

Il y a deux questions:

  1. J'ai essayé d'encapsuler v-if autour de plusieurs instructions qui génèrent l'avertissement, mais à mon avis, cette solution est détaillée. Y a-t-il une approche soignée?
  2. Les "avertissements" dans le développement local se transforment en "erreurs fatales" (HTML ne peut pas être restitué) en production. Comment les faire pareil? par exemple. les deux émettent des avertissements ou des erreurs?
vue.jsvue-componentnetlify
14
Jerry Zhang

Utilisez simplement v-if sur un parent commun à tous les éléments de votre modèle en vous basant sur cet appel AJAX, et non autour de chacun d'eux.

Donc au lieu de quelque chose comme:

<div>
  <h1 v-if="foo.title">{{ foo.title }}</h1>
  <p v-if="foo.description">{{ foo.description }}</p>
</div>

Faire

<div>
  <template v-if="foo">
    <h1>{{ foo.title }}</h1>
    <p>{{ foo.description }}</p>
  </template>
</div>
26
Bill Criswell

avez-vous essayé d'initialiser toutes les données dont vous avez besoin? par exemple. Si vous avez besoin de abc, vous pouvez faire:

new Vue({
  data: {
    a: 1,
    b: '',
    c: {}
  },
  created(){
    // send a request to get result, and assign the value to a, b, c here

  }
})

De cette façon, vous n'obtiendrez aucune erreur xx is undefined

5
Sabrina Luo

Les gars ont raison, mais je peux ajouter quelque chose ... S'il est possible que l'élément racine de la condition soit indéfini pour une raison quelconque, il est recommandé d'utiliser quelque chose comme ça: v-if='rootElement && rootElement.prop'. Cela vous évitera d'obtenir cannot get property prop of undefined car lorsque rootelement n'est pas défini, il n'ira pas plus loin dans la vérification.

1
M U