Firebase 在Vue.js中呈现firestore值

我试图构建一个简单的应用程序，但在从Firestore获取Vue渲染数据时遇到了麻烦。下面是有人登录后的vue页面的代码。本质上，我只是想让它显示登录者的姓名。目前，我将每个用户的显示名作为get（）函数的文档ID。现在，它甚至不像是在运行“firestore（）”函数，因为我在开始时尝试向控制台输出一些文本，但没有看到它。知道这里发生了什么吗？谢谢大家!

<template>
  <v-container fluid>
    <v-layout row wrap>
      <v-flex xs12 class="text-xs-center" mt-5>
        <h1>Home page</h1>
      </v-flex>
      <v-flex xs12 class="text-xs-center" mt-3>
        <p>Welcome {{ name }}</p>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import firebase from 'firebase'
export default {
  data () {
    return {
      name: ''
    }
  },
  firestore () {
    firebase.firestore().collection('user').doc(firebase.auth().currentUser.displayName).get()
    .then(doc => {
      if (doc) {
        var data = doc.data()
        return {
          name: data.name
        }
      } else {
        console.log('No document exists')
      }
    }).catch(error => { console.log('Error: ' + error) })
  }
}
</script>

主页
欢迎{{name}

从“firebase”导入firebase
导出默认值{
数据（）{
返回{
名称：“”
}
},
消防仓库（）{
firebase.firestore（）.collection（'user'）.doc（firebase.auth（）.currentUser.displayName）.get（）
。然后（doc=>{
国际单项体育联合会（doc）{
var data=doc.data（）
返回{
名称：data.name
}
}否则{
console.log（'不存在文档'）
}
}).catch（错误=>{console.log（'error:'+error）}）
}
}

为此，您可以使用创建的

钩子

created() {
  firebase.firestore().collection('user').doc(firebase.auth().currentUser.displayName).get()
    .then(doc => {
      if (doc) {
        var data = doc.data()
        this.name = data.name
      } else {
        console.log('No document exists')
      }
    }).catch(error => { console.log('Error: ' + error) })
}

如果你正在使用，你可以

firestore: {
  users: firebase.firestore().collection('user').doc(firebase.auth().currentUser.displayName)
}

然后在您的Vue代码中使用
this.users
谢谢！我安装了Vuefire，函数似乎正在运行，但它似乎仍然没有将“name”值绑定到数据函数中的“name”属性上。我的控制台记录了“data.name”，它得到了正确的输出，但由于某些原因，它没有附加到data（）中的变量。知道为什么吗？你在用
created
hook吗？请发布您的更新代码。