Vue.js [팝업창을 이용한 댓글 수정구현]

Vue.js

Vue.js [팝업창을 이용한 댓글 수정구현]

z00h 2022. 8. 1. 18:57

vue.js로 ui를 구성할때 댓글 수정/삭제시에 기존에는 router를 이용해 수정/삭제 페이지로 이동하여 기능을 처리 하였지만 조금 더 깔끔하게 만들고 싶어서 팝업창을 이용하여 처리 하도록 만들어 보았다.

팝업창을 이용하면 위와 같이 댓글 수정기능을 처리 할 수 있다.

팝업창을 만들기 위해서는 v-dialog를 사용하여야 하는데 v-dialog의 기본값을 false로 해놓으면 팝업이 없는 상태, true면 팝업창이 뜨도록 만들어 준다.

그리고 컴포넌트를 활용하여야 한다. CarDetail.vue를 부모컴포넌트, CarCommentChange.vue를 자식컴포넌트로 잡고

부모컴포넌트에서 자식컴포넌트의 메서드를 호출하도록 해주었다.

우선 CarDetail.vue에서 컴포넌트 등록부터 보도록 하겠다.

부모컴포넌트에 수정/삭제 vue를 import시키고 컴포넌트 등록을 한 화면이다.

CarCommentChange.vue

<template>
  <v-dialog
      v-model="dialog"
      width="500"
  >
    <v-card>
      <v-card-title class="text-h5 grey lighten-2">
        댓글수정
      </v-card-title>

      <v-text-field
          v-model="cuser.content"
          placeholder="댓글을 입력하세요"
      />
      <v-divider></v-divider>
      <v-card-actions>

        <v-spacer></v-spacer>
        <v-btn
            color="primary"
            text
            @click="change"
        >
          댓글 수정
        </v-btn>
        <v-btn
            color="primary"
            text
            @click="dialog = false"
        >
          취소
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: "CarCommentChange.vue",

  data() {
    return {
      cuser:[],
      dialog:false,
      cid: 0,
      content:'',
    }
  },

  methods: {
    putChildDialog(cid){
      console.log('child cid '+ cid);
      this.cid =cid;
      this.dialog = true;

    },
    change(){
      console.log(this.content)
      let data = {};
      data.content = this.cuser.content

      this.$axios.put("comment/" + this.cid, JSON.stringify(data), {
        headers: {
          "Content-Type": `application/json`,
          Authorization: "Bearer " + this.$store.state.userStore.token
        },
      }).then((res)=>{
        if(res.data){
          alert('수정되었습니다.');
          this.$router.go(0);
        } else {
          alert("실행중 실패했습니다.");
        }
      })
          .catch((err)=>{
            console.log(err);
          })
    },
  },
}
</script>

우선 해당하는 cid에 대한 댓글을 수정하여야 하기 때문에 CarDetail.vue(부모 컴포넌트)에서 CarCommentChagne(자식 컴포넌트)로 해당 cid를 받아주는 메소드가 putChildDialog이다.

부모컴포넌트의 메서드를 통해 putChildDialog로 cid를 받는다.

받은 cid로 cid를 리턴받도록 this를 써서 넘겨준다. 그리고 dialog의 값이 true로 바뀌면서 팝업창이 열리도록 한다.

팝업창의 댓글 수정 버튼을 누르면 change메소드가 활성화 되면서 사용자가 입력한 cuser.content로 putMapping을 통해 댓글을 update시켜준다.

그리고 putChildDialog(부모 컴포넌트)에서 자식 컴포넌트를 호출하기에 앞서 템플릿에 자식 요소 Element에 ref라는 주소 value를 선언해준다. value는 CarComment로 선언하였다.

부모컴포넌트 메서드에서 자식 컴포넌트 메서드를 호출하기 위해 this.$refs.CarComment.putChildDialog 로 간단하게 호출을 할 수 있다.

여기서 CarComment는 ref라는 주소 value, putChildDialog는 호출하려는 자식 메서드이다.

그 다음 CarDetail.vue의 putOpenDialog에서 아까 말한 cid값을 넣어줘서 자식컴포넌트가 받아오도록 해준다.

mid를 같이 넣은 이유는 this.mid(현재 웹에서 로그인 중인 즉 userStore의 mid)와 댓글이 가지고 있는 mid를 비교하여 댓글수정 권한이 있는지 확인하기 위해 if문을 통해 mid가 같으면 수정이 되고, mid가 다르면 댓글을 다른 사람이 쓴 것이기 때문에 수정이 안되도록 만들었다.