VUEJS + Firestore如何输出数据?

时间:2018-07-27 13:37:21

标签: firebase vue.js google-cloud-firestore

我创建了一条帖子并将其存储在Cloud Firestore中,现在我想将数据输出到名为vueJs的{​​{1}}文件中。

但是我不知道它是如何工作的。我自己尝试了一些想法,但收效不佳。

那我怎么输出这些数据呢?

文件:

Dashboard.vue

在firebase中创建帖子数据:
created post data in firebase

Firebase => Cloud Firestore vueJs

中创建发布方法
post.vue

1 个答案:

答案 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>