[Vue] 게시판 만들기(5) 댓글 구현

댓글 하나하나를 컴포넌트로 만든다.

<template>
  <div>
    <!-- 댓글 데이터를 불러와 반복문으로 돌려 컴포넌트에 각각 들어가도록 한다.-->
    <div v-for="item in commentObj" :key="item.comment_id">
        <PrCommentListItem :commentItem="item" :reload="reload"/>
    </div>
    <!-- 댓글 쓰기 창도 아래 컴포넌트에 따로 생성.-->
    <div>
      <PrCommentCreate :contentId="contentId" :reload="reload"/>
    </div>
  </div>
</template>
<script>
import data from "@/data"
import PrCommentListItem from "@/components/PrCommentListItem";
import PrCommentCreate from "@/components/PrCommentCreate";

  export default {
    name:"PrCommentList",
    components:{
      PrCommentListItem,
      PrCommentCreate
    },
    props:{
      contentId:Number,
    },
    data(){
      return{
        commentObj : data.Comment.filter(item => item.content_id === this.contentId)
      }
    },
  }
</script>

❓ data의 선언이 저렇게 길어져도 되는지? 아니면 created에서 다시 선언해줘야할지? 어떤 것이 성능적으로 더 좋을까?

//PrCommentListItem 댓글 속성 정의
<template>
  <div class="commentItem">
    <div>{{ name }}</div>
    <div>{{ commentItem.created_at }}</div>
    <div>{{ commentItem.context }}</div>
    <b-button @click="updateComment">수정</b-button>
    <b-button @click="deleteComment">삭제</b-button>
  </div>
</template>

<script>
import data from "@/data"
export default {
  name:"PrCommentListItem",
  props:{
    commentItem:Object,
    reload:Function
  },
  data(){
    return{
      name:'',
    }
  },
  created(){
    this.name = data.User.filter(item => item.user_id === this.commentItem.user_id)[0].name
  },
  methods:{
    updateComment(){

    },
    deleteComment(){
      const commentIdx = this.commentItem.comment_id;
      const deleteArrayId = data.Comment.findIndex(item => item.comment_id === commentIdx);
      data.Comment.splice(deleteArrayId, 1);
      this.reload();

    }
  }
}
</script>
<style>
.commentItem{
  border:1px solid #000;
  margin-bottom:10px;
  padding:10px;
}
</style>

댓글 생성

<template>
  <div>
    <hr>
    <div>seyoung</div>
    <b-textarea
      placeholder="댓글을 입력하세요"
      v-model="context"
    ></b-textarea>
    <b-button @click="createComment">댓글달기</b-button>
  </div>
</template>

<script>
import data from "@/data"
export default {
  name:"PrCommentCreate",
  props:{
    contentId:Number,
    reload:Function
  },
  data(){
    return{
      context:''
    }
  },
  methods:{
    createComment(){
      data.Comment.push(
          {
            comment_id: data.Comment[data.Comment.length - 1].comment_id + 1,
            user_id: 1,
            content_id: this.contentId,
            context: this.context,
            created_at: '2019-03-29 14:11:11',
            updated_at: null
          }
      )
      this.reload();
      console.log(data.Comment)
    }
  },

}
</script>