web-dev-qa-db-fra.com

[Vue warn]: Erreur dans la fonction de rendu: "TypeError: Impossible de lire la propriété 'prenom' de null"

J'ai le composant Navigation.vue suivant:

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

<script>
  import { mapActions, mapGetters } from 'vuex'

  export default {
    name: 'hello',
    methods: {
      ...mapActions(['myAccount'])
    },

    mounted: function () {
      if (localStorage.getItem('access_token')) {
        this.myAccount()
      }
    },

    computed: {
      ...mapGetters(['user'])
    }
  }
</script>

Ce code retourne:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'first_name' of null"

mais ce qui est étrange, c'est que le prénom de l'utilisateur s'affiche correctement. Qu'est-ce que je fais mal?

javascriptvue.jsvuex
3
Mateusz Urbański

Vous obtiendrez probablement cette erreur car user dans votre magasin Vuex est initialement défini sur null. Le user getter mappé sur votre composant Vue renvoie cette valeur null avant une initialisation dans le magasin Vuex définit correctement la user.

Vous pouvez initialement définir user sur un objet vide {}. De cette façon, user.first_name dans le modèle de votre composant Vue sera undefined et rien ne sera rendu dans le modèle.

Vous pouvez également ajouter un attribut v-if="user" à l'élément div contenant:

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

De cette façon, la variable div et son contenu ne seront pas rendus tant que la valeur de la propriété mappée user ne sera pas true. Cela empêchera Vue d'essayer d'accéder à user.first_name tant que la user ne sera pas correctement définie.

14
thanksd

Une solution qui a fonctionné pour moi a été de définir l'utilisateur sur une chaîne vide ' ' au lieu de null.

const state = {
    user: ''
}
0
user1925711