Skip to content

Instantly share code, notes, and snippets.


DataBoiBlog/dashboard.vue Secret

Created Aug 31, 2019
What would you like to do?
Twitter clone
<div class="container">
<h1>Latest Posts</h1>
<form @submit="createPost">
<label for="create-post">Wsup?</label>
<input type="text" id="create-post" v-model="text" placeholder="Type your message here..." />
<button v-on:click="forceRerender" type="submit">Send</button>
<PostComponent :timestamp="timestamp" :posts="posts" :key="componentKey" />
<!-- props, post list update on render, emit function for deleting -->
import db from "./firebaseInit";
import firebase from "firebase/app";
import PostComponent from "./PostComponent";
export default {
name: "dashboard",
components: {
data() {
return {
text: null,
id: null, //good null
posts: [],
time: null,
componentKey: 0,
timestamp: null,
firebase: {
posts: db.collection("posts")
methods: {
forceRerender() {
this.componentKey += 1; //updates the list of posts by changing they key on the post component
console.log("ckey =" + this.componentKey);
createPost() {
// when posts are created, they get added to the "posts" collection here
text: this.text, //NEEDED
time: new Date(new Date().toJSON().toString()).toLocaleString(), // NEEDED. converts the post time into local time
timestamp:, //NEEDED
.catch(error => console.log(error));
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment