Vue.js VueJS-属性或方法“;“当前用户”;未在实例上定义
我有一个组件,在该组件中初始化Vue.js VueJS-属性或方法“;“当前用户”;未在实例上定义,vue.js,Vue.js,我有一个组件,在该组件中初始化data()属性中的空对象currentUser,还有一个HTML模板,该模板引用了组件中定义的currentUser,但我得到一个错误: Property or method "currentUser" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or
data()
属性中的空对象currentUser
,还有一个HTML模板,该模板引用了组件中定义的currentUser
,但我得到一个错误:
Property or method "currentUser" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
这是我的密码
userProfile.vue
导出默认值{
数据(){
返回{
当前用户:{
用户名:“”,
电子邮件:“”,
电话号码:“”,
名字:'',
姓氏:“”,
时间:'',
加入:'',
推特URL:“”,
facebookUrl:“”,
linkedInUrl:“”,
化身:{}
}
}
},
已创建(){
}
}
userProfile.html
{{currentUser.first_name+''+currentUser.last_name}
我不明白为什么我会犯这个错误<代码>当前用户在组件中定义。您的模板未正确关闭:我看到的是而不是您是否尝试过内联测试模板,而不是将其作为单独的文件包含?可能是因为您的模板未正确关闭:我看到了,而不是哦,我的上帝!是的,这就是问题所在@Istopopoki我不敢相信我输入了这样的错误:)对不起,谢谢你的帮助:)我复制粘贴了你的代码在VS代码中,文本颜色立即显示出一些错误…非常有用,特别是对于Vetur插件。我推荐它!很奇怪升华文本3没有给我看。我需要改进它。
<template src='./userProfile.html'><template>
<script>
export default {
data(){
return {
currentUser: {
username: '',
email: '',
phoneNumber: '',
firstName: '',
lastName: '',
hourlyRate: '',
joined: '',
twitterUrl: '',
facebookUrl: '',
linkedInUrl: '',
avatar: {}
}
}
},
created(){
}
}
</script>
<div class="profile-img">
<img :src="currentUser.avatar.url" alt=""/>
<h5>{{currentUser.first_name + ' ' + currentUser.last_name}}</h5>
</div>