Vue Home.vue

<template>
  <div class="homepage__onLoad"></div>
  <Nav />
  <!-- home page -->
  <div class="homepage__container">
    <div class="homepage__wrapper">
      <!-- create post component -->
      <Post-create
        :loggedUsername="loggedUsername"
        :loggedFirstname="loggedFirstname"
        v-on:postUpdated="handlePostUpdated"
      />
      <!-- create post component -->

      <!-- Post component -->
      <Post
        v-for="post in posts"
        :key="post.id"
        :post="post"
        class="post__container profile__contentContainer--animation"
        v-on:postUpdated="handlePostUpdated"
      />
      <!-- Post component -->
    </div>
  </div>
  <!-- home page -->
  <div class="responsiveSpacer"></div>
</template>

<script>
// => Plugins
import axios from "axios";

// => Components
import Nav from "@/components/Nav";
import Post from "@/components/Post";
import PostCreate from "@/components/Post-create";

export default {
  data() {
    const loggedUser = localStorage.getItem("userId");
    const loggedUsername = localStorage.getItem("username");

    const splittedUser = loggedUsername.split(" ");
    const loggedFirstname = splittedUser[0];

    return {
      posts: [],
      errors: [],
      loggedUser: loggedUser,
      loggedUsername: loggedUsername,
      loggedFirstname: loggedFirstname,
    };
  },
  components: {
    Nav,
    Post,
    PostCreate,
  },
  methods: {
    handlePostUpdated: async function() {
      console.log("handle post updated");

      await this.loadPosts();
    },
    loadPosts: async function() {
      const API_SERVER = "http://localhost:3000";

      try {
        const response = await axios.get(API_SERVER + `/posts`, {
          headers: {
            Authorization: "Bearer " + localStorage.getItem("token"),
          },
        });

        this.posts = response.data;
      } catch (error) {
        this.errors.push(error);
      }
    },
  },
  async mounted() {
    await this.loadPosts();
  },
};
</script>