[Vue警告]:渲染函数出错:"TypeError:无法读取属性'first_name'为null"

Question

我有以下Navigation.vue组件:

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

此代码返回:

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

但奇怪的是用户名字正确显示.我究竟做错了什么？

Answer 1

您很可能会收到该错误,因为user您的Vuex商店最初设置为null.user映射到Vue组件的getter null在将某些初始化到Vuex存储之前正确地设置了该值user.

您最初可以将其设置user为空对象{}.这样,user.first_name在您的Vue组件的模板中undefined,将不会在模板中呈现任何内容.

或者,您可以v-if="user"向包含div元素添加属性:

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

这样,在div映射user属性的值为真的之前,不会呈现它及其内容.这将阻止Vue user.first_name在user正确设置之前尝试访问.