我正在尝试构建一个简单的应用程序,但在获取我试图从 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>
最佳答案
为此,您可以使用 created
Hook 。
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) })
}
如果您使用 vuefire , 你可以这样做
firestore: {
users: firebase.firestore().collection('user').doc(firebase.auth().currentUser.displayName)
}
然后在你的 Vue 代码中使用 this.users
关于firebase - 在 Vue.js 中渲染 firestore 值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50903307/