[Vue warnen]: Fehler in Render-Funktion: "Typeerror: nicht Eigentum 'first_name' lesen kann von null"

Question

Ich habe die folgende Navigation.vue Komponente:

<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> 

Dieser Code gibt Folgendes zurück:

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

aber das seltsame ist, dass der Vorname des Benutzers korrekt angezeigt wird. Was mache ich falsch?

Answer 1

Wahrscheinlich erhalten Sie diesen Fehler, weil user in Ihrem Vuex-Store anfänglich auf null festgelegt ist. Der user Getter, der Ihrer Vue-Komponente zugeordnet ist, gibt den Wert null zurück, bevor eine Initialisierung in den Vuex-Speicher die user richtig festlegt.

Sie könnten zunächst user auf ein leeres Objekt {} setzen. Auf diese Weise wird user.first_name in Ihrer Vorlage der Vue-Komponente undefined und nichts wird in der Vorlage gerendert werden. Alternativ

---

, könnten Sie ein v-if="user" Attribut auf das enthält div Element hinzufügen:

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

Auf diese Weise, die div und sein Inhalt gerendert wird nicht, bis der Wert der abgebildeten user Eigenschaft truthy ist . Dies verhindert, dass Vue versucht, auf user.first_name zuzugreifen, bis die user richtig eingestellt ist.