我创建了一条帖子并将其存储在Cloud Firestore
中,现在我想将数据输出到名为vueJs
的{{1}}文件中。
但是我不知道它是如何工作的。我自己尝试了一些想法,但收效不佳。
那我怎么输出这些数据呢?
文件:
Dashboard.vue
和
在Firebase => Cloud Firestore
vueJs
post.vue
答案 0 :(得分:2)
执行以下操作:
在数据中创建一个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>