인프런 커뮤니티 질문&답변

현재 아래와 같이 코드를 작성한 상태입니다.

초기화면, 로그인 한 후에 작성된 글이 로딩이 되지 않습니다. 

새로고침을 하면, backend의 /posts에서 정상적으로 posts들을 내려보내주고 있고,

front에서 store/posts.js의 loadPosts에서 정상적으로 값을 받아서, mutations의 loadPosts로 mainPosts에 값이 정상적으로 들어가는 것까지 확인을 했습니다.

그런데 화면에는 보이지 않고, 확대후 스크롤 동작을 해야 게시글이 나타납니다.

=> fetch 함수를 지웠다 저장한 후, 다시 쓰고 저장하고 새로고침을 하면 작성된 글이 보여집니다..

<template>
  <v-container>
    <post-form v-if="me" />
    <div>
      <post-card v-for="post in mainPosts" :key="post.id" :post="post" />
    </div>
  </v-container>
</template>

<script>
  import PostCard from '~/components/PostCard';
  import PostForm from '@/components/PostForm';

  export default {
    components: {
      PostCard,
      PostForm
    },
    computed: {
      me() {
        return this.$store.state.users.me;
      },
      mainPosts() {
        return this.$store.state.posts.mainPosts;
      },
      hasMorePost() {
        return this.$store.state.posts.hasMorePost;
      }
    },
    fetch({ store }) {
      return store.dispatch('posts/loadPosts');
    },
    mounted() {
      window.addEventListener('scroll', this.onScroll)
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.onScroll)
    },
    methods: {
      onScroll() {
        if (window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300) {
          if (this.hasMorePost) {
            this.$store.dispatch('posts/loadPosts');
          }
        }
      }
    },
  }
</script>