VueJS-在实例上未定义属性或方法“ currentUser”

Question

我有一个组件，该组件在currentUser属性中初始化一个空对象data()和一个引用该组件中定义的currentUser的HTML模板，但出现错误：

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

<template src='./userProfile.html'><template>
<script>
  export default {
    data(){
      return {
        currentUser: {
          username: '',
          email: '',
          phoneNumber: '',
          firstName: '',
          lastName: '',
          hourlyRate: '',
          joined: '',
          twitterUrl: '',
          facebookUrl: '',
          linkedInUrl: '',
          avatar: {}
        }
      }
    },
    created(){      

    }
  }
</script>

userProfile.html

<div class="profile-img">
    <img :src="currentUser.avatar.url" alt=""/>
    <h5>{{currentUser.first_name + ' ' + currentUser.last_name}}</h5>
</div>

我不明白为什么会出现此错误。 currentUser在组件中定义。

Answer 1

您的模板未正确关闭：我看到的是。