Как показать извлеченные данные из firebase в тег заголовка <h1> {{}} </h1> в vue js?

Question

Я пытался показать полученные данные из базы данных в тег, но ничего не отображается.

Я получил данные текущего пользователя из firestor.В журнале консоли, он показывает данные правильно.Но когда я попытался присвоить значение тегу заголовка, он ничего не показывает.

вот код, который я пробовал так:

 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-шаблон, где я пытаюсь передать электронную почтуИмя, фамилия, имя организации, значение, которое я получил из вывода консоли 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>

Результат вывода журнала консоли:

Answer 1

Вызов function() внутри onSnapshot имеет собственную область видимости, поэтому this внутри этой функции больше не ссылается на компонент:

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

Вместо этого используйте жирную стрелку, чтобы сохранить компонент this:

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

(Вторая ошибка - вы пытаетесь отобразить {{currentUser.email}}, но устанавливаете this.email; вам нужно использовать одно и то же имя переменной для обоих.)