[Vue warn]: Error in render function: "TypeError: Cannot read property 'first_name' of null"
[Vue warn]: Error in render function: "TypeError: Cannot read property 'first_name' of null"
我有以下 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>
此代码returns:
[Vue warn]: Error in render function: "TypeError: Cannot read property 'first_name' of null"
但奇怪的是用户名字显示正确。我做错了什么?
您很可能会收到该错误,因为您的 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
之前尝试访问 user.first_name
。
对我有用的解决方案是将用户设置为空字符串 ' '
而不是 null。
const state = {
user: ''
}
beforeMount(){
if (localStorage.getItem('access_token')) {
this.myAccount()
}
}
我有以下 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>
此代码returns:
[Vue warn]: Error in render function: "TypeError: Cannot read property 'first_name' of null"
但奇怪的是用户名字显示正确。我做错了什么?
您很可能会收到该错误,因为您的 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
之前尝试访问 user.first_name
。
对我有用的解决方案是将用户设置为空字符串 ' '
而不是 null。
const state = {
user: ''
}
beforeMount(){
if (localStorage.getItem('access_token')) {
this.myAccount()
}
}