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

时间:2017-10-23 20:16:00

标签: javascript vue.js vuex

我有以下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"

但奇怪的是用户名字正确显示。我做错了什么?

3 个答案:

答案 0 :(得分:14)

您最有可能收到该错误,因为您的Vuex商店中的user最初设置为null。映射到Vue组件的user getter在向Vuex存储库进行初始化之前返回null值,正确设置user

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

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

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

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

答案 1 :(得分:0)

对我有用的解决方案是将用户设置为空字符串' '而不是null。

const state = {
    user: ''
}

答案 2 :(得分:-1)

Flux