firebase - VUEJS + Firestore 如何输出数据?
问题描述
我创建了一个帖子并将其存储在其中Cloud Firestore
,现在我想将数据输出到vueJs
名为Dashboard.vue
.
但我不知道它是如何工作的。我自己尝试了一些想法,但没有得到好的结果。
那么如何输出这些数据呢?
文件:
Firebase => Cloud Firestore
和
在中创建 post 方法vueJs
post.vue
createPost () {
fb.postsCollection.add({
postDetails: {
createdOn: this.postDetails.createdOn,
content: this.postDetails.content,
userId: this.currentUser.uid,
image: this.postDetails.image,
comments: this.postDetails.comments,
likes: this.postDetails.likes
}
}).then(ref => {
this.post.content = ''
this.$router.push('/dashboard')
}).catch(err => {
console.log(err)
})
}
解决方案
执行以下操作:
在您的数据中创建一个posts
数组:
...
data() {
return {
posts: []
}
},
....
然后创建一个获取记录并将结果分配给posts
数组的方法:
methods:{
getPosts: function() {
fb.postsCollection.orderBy('createdOn', 'desc').onSnapshot(querySnapshot => {
let postsArray = []
querySnapshot.forEach(doc => {
let post = doc.data()
post.id = doc.id
postsArray.push(post)
})
this.posts = postsArray;
})
}
},
.....
调用beforeMount()
生命周期钩子中的方法:
beforeMount(){
this.getPosts()
},
然后将帖子渲染到 DOM。例如:
<div v-if="posts.length">
<div v-for="post in posts">
<h4>{{ post.createdOn }}</h4>
<p>{{ post.content}}</p>
<ul>
<li>comments {{ post.comments }}</li>
</ul>
</div>
</div>
<div v-else>
<p>There are currently no posts</p>
</div>
推荐阅读
- django - 强制 URL 将视图与 re_path 匹配
- ios - Swift 编译器问题
- java - 休眠 PersistentAttributeInterceptor 使可连接不起作用
- javascript - 用于将 PDF 转换为图像的云函数
- php - Jasper:从 Iframe 的仪表板中删除徽标和一些 Jasper 菜单?
- python - Python pandas 为每列数据捕获现有数据值,连接新值并确保每列数据的值是唯一的
- c# - 如果原始表为空,则从另一个表中选择
- android - 关于 MutableLiveData (android) 的快速问题
- javascript - 从外键调用 dbo.Employee 的 FirstName
- java - 如何从没有扩展名的 URL 加载图像