Skip to content

Instantly share code, notes, and snippets.

@IsmailShurrab
Created October 1, 2018 19:30
Show Gist options
  • Save IsmailShurrab/2d324b32082cee0a869c06fed33417f1 to your computer and use it in GitHub Desktop.
Save IsmailShurrab/2d324b32082cee0a869c06fed33417f1 to your computer and use it in GitHub Desktop.
Create a posts array in your data:
...
data() {
return {
posts: []
}
},
....
Then create a method that fetches the records and assigns the result to the posts array:
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;
})
}
},
.....
Call the method in the beforeMount() lifecycle hook:
beforeMount(){
this.getPosts()
},
Then render the posts out to the DOM. For example:
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment