如何顯示從Firebase到標頭標簽的檢索數據 <h1> {{}} </h1> 在Vue JS中？

Question

我一直試圖顯示從Firebase檢索到的數據到標簽中，但什么也不顯示。

我已經從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

onSnapshot內的function()調用具有其自身的作用域，因此該函數內的this不再引用該組件：

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

相反，用一份豐厚的箭頭功能，以保護組件this ：

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

（第二個錯誤是您試圖顯示{{currentUser.email}}但設置this.email ；您需要為兩者使用相同的變量名。）