Javascript 如何将检索到的数据从firebase显示到标题标签<；h1>；{{}}</h1>；在vue js中？

我一直试图将从firebase检索到的数据显示到标记中，但没有显示任何内容

我已从firestor检索到当前用户的数据。在控制台日志中，它正确显示数据。但当我试图给header标签赋值时，它并没有显示任何内容

以下是我尝试过的代码：

 data() {
  return {

        email: '',
        firstname: '',
        lastname: '',
        secondaryEmail: '',
        businessName: '',

  };

},
computed:{
  currentUser (){

    return this.$store.state.currentUser
  }
  },
methods: {

},

created() {

  const firestore = database.firestore(); 

  firestore.collection('users').doc(firebase.auth().currentUser.uid). onSnapshot(function(doc){

          const newData = doc.data()

          console.log('newData:', newData.email)
          console.log('firstname:', newData.firstname)

          const email = newData.email;
          const firstname = newData.firstname;
          const lastname = newData.lastname;
          const secondaryEmail = newData.secondaryEmail;
          const businessName = newData.businessName;

          this.email = email;
          this.firstname = firstname;
          this.lastname = lastname,
          this.secondaryEmail = secondaryEmail,
          this.businessName = businessName


          console.log('profile email:',  this.email)
          console.log('profile firstname:',  this.firstname)
          console.log('profile lastname:',  this.lastname)
          console.log('profile secondaryEmail:',  this.secondaryEmail)
          console.log('profile businessName:',  this.businessName)



      })



}

这是我的html模板，我试图在其中传递电子邮件、firstname、lastname、businessname值，这些值是我从firebase控制台输出中获得的

   <div class="card" style="border: none;">
                      <div class="card-body" style="float: left; text-align: left;" >
                        <h5 class="card-title">{{firstname}}</h5><br>
                        <h5 class="card-title">{{lastname}}</h5><br>
                        <h5 class="card-title">{{currentUser.email}}</h5><br>
                        <h5 class="card-title">{{secondaryEmail}}</h5><br>
                        <h5 class="card-title">{{businessName}}</h5><br>
                      </div>
                    </div>

{{firstname}}

{{lastname}}

{{currentUser.email}}

{{secondaryEmail}}

{{businessName}}

控制台日志输出结果：

onSnapshot中的

函数（）调用

有自己的作用域，因此该函数中的

此

不再引用组件：

...onSnapshot(function(doc){...})

而是使用一个胖箭头函数来保留组件

此

：

...onSnapshot((doc) => {...})

（第二个错误是，您试图显示

{{currentUser.email}}

，但设置

this.email

；您需要对这两个变量使用相同的名称。）

onSnapshot中的

函数（）调用

有自己的作用域，因此该函数中的

this

不再引用组件：

...onSnapshot(function(doc){...})

而是使用一个胖箭头函数来保留组件

此

：

...onSnapshot((doc) => {...})

（第二个错误是您试图显示

{{currentUser.email}}

，但设置

this.email

；您需要为这两个变量使用相同的变量名。）