Skip to content

Instantly share code, notes, and snippets.

@DataBoiBlog
Last active Aug 31, 2019
Embed
What would you like to do?
Twitter clone
<template>
<div>
<div
v-for="Post in posts"
v-bind:key="Post.id"
>
<button class="btn-floating btn-small red" :key="Post.id" @click="deletePost(Post)" ><i class="fa fa-times"></i></button>
&nbsp;
{{Post.text}} <br>
[{{Post.time}}] <br>
({{Post.id}} --- {{Post.timestamp}})
<br><br>
</div>
</div>
</template>
<script>
import db from "./firebaseInit";
import firebase from "firebase/app";
export default {
name: "postcomponent",
data() {
return {
// text: null,
id: null,
posts: [],
// time: null,
postKey: 0,
timestamp: null
};
},
props: {
timestamp: {
type: Number
}
},
methods: {
deletePost(Post) {
console.log(Post.timestamp)
var idx = this.posts.indexOf(Post)
this.posts.splice(idx, 1)
if(confirm("Are you sure that you want to delete this post?"))
db.collection("posts")
.where("time", "==", Post.time)
.where("text", "==", Post.text)
.where("timestamp", "==", Post.timestamp)
.limit(1)
.get()
.then( querySnapshot => {
querySnapshot.forEach(doc => {
this.time = doc.ref.delete()
this.$router.push("/")
})
}
);
this.postKey += 1;
}
},
created() { // shows and orders the list of posts. when they are "created, it takrs a "snapshot"...
db.collection("posts")
.orderBy("timestamp", "desc")
.get()
.then(querySnapshot => {
querySnapshot.forEach(doc => {
const data = {
id: doc.id,
text: doc.data().text,
time: doc.data(Date.now()).time, //keep to show timestamp doc.data().time,
timestamp: doc.data().timestamp
};
this.posts.push(data);
console.log(doc.data());
console.log(doc.data(Date.now()).time);
});
});
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment