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

Posted 2023-02-22

【中文标题】如何在 vue js 中显示从 firebase 检索到的标题标签 <h1> </h1> 的数据？

【英文标题】：How to show retrieved data from firebase to header tag <h1> </h1> in vue js?如何在 vue js 中显示从 firebase 检索到的标题标签 <h1> </h1> 的数据？

【发布时间】：2019-09-26 11:11:40

【问题描述】：

我一直在尝试将从 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>

控制台日志输出结果：

【参考方案1】：

onSnapshot 内部的 function() 调用有自己的范围，因此该函数内部的 this 不再引用组件：

...onSnapshot(function(doc)...)

改为使用粗箭头函数，以保留组件this：

...onSnapshot((doc) => ...)

（第二个错误是您尝试显示currentUser.email 但设置this.email；您需要为两者使用相同的变量名。）