I'm currently developing my first application using Vue and Firebase.
On one page, users can create a post and send it to the real-time database with name, email, picture, and status.
In another page (the admin page), you have the option to publish or not publish a post by changing its status to true or false. So:
reading() {
this.postRef.on('child_added', snapshot => {
this.posts.push(snapshot.val());
this.key.push(snapshot.key);
}),
changeStatus(index) {
let key = this.key[index]
this.posts[index].status = true;
firebase.database().ref('posts/'+ key +'/status').set('true')
},
Once the status is set to true, posts should be visible on the wall page.
How can I retrieve only the children with status == true in real-time on the wall page? Currently, I am using this method:
reading() {
this.postRef.on('child_added', snapshot => {
this.posts.push(snapshot.val());
this.key.push(snapshot.key);
})
And in the template:
<v-layout row wrap justify-center v-for="(item, index) in posts">
I have tried using v-if="item.status == true" but I need to refresh the page constantly to see new posts.
Here is a screenshot of my database: