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

지난번 팝업창을 이용하여 댓글 수정을 구현하였는데 지난 게시글을 참고하면 매우 쉽게 삭제도 구현할 수 있다. 

 

 

 

 

참고!!

https://z00h.tistory.com/89

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

 

 

 

 

 

 

 

지난 게시물에서 상세하게 다뤄 보았기 때문에 간단하게 보자면 마찬가지로 CarDetail.vue에 CarCommentDel의 댓글 삭제 dialog가 실행되도록 컴포넌트를 등록해주고 자식 컴포넌트 메서드를 호출해주는 부모 컴포넌트 메서드를 만든다.

 

부모 컴포넌트 메서드에서는 cid,mid를 받아와 mid는 권한이 있는지 없는지 확인, cid는 자식컴포넌트 메서드로 넘겨주도록, 만들어 준다.

 

 

 

 

CarCommentDel.vue(자식 컴포넌트)

 

<template>
  <v-dialog
      v-model="dialog"
      width="300"
  >
    <v-card>
      <v-card-title class="text-h5 grey lighten-2">
        댓글삭제
      </v-card-title>

      <span> 댓글을 삭제하시겠습니까?</span>
      <v-divider></v-divider>
      <v-card-actions>

        <v-spacer></v-spacer>
        <v-btn
            color="primary"
            text
            @click="del"
        >
          확인
        </v-btn>
        <v-btn
            color="primary"
            text
            @click="dialog = false"
        >
          취소
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

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

  data() {
    return {
      dialog:false,
      cid: 0,
    }
  },

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

    },
    del(){
      this.$axios.delete("comment/" + this.cid)
        alert("댓글이 삭제 되었습니다.");
      this.$router.go(0);
    }

  },
}
</script>

 

dialog의 초기값은 false, delChildDialog가 호출되면 dialog가 true로 바뀌면서 팝업창 실행.

del메서드는 delete매핑을 통해 해당하는 cid값의 comment의 isDel을 Y(삭제)로 바꿔준다.

 

 

 

 

 

 

 

 

 

 

 

홍길동으로 로그인이 된 상태에서 홍길동의 댓글 삭제 버튼을 누르니 팝업창이 뜬다.

여기서 확인버튼을 누르면

 

 

 

 

 

 

 

 

 

 

alert가 실행이 되면서 정상적으로 댓글이 삭제된 것을 확인 할 수 있다!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

지난번 포스팅에서 팝업창으로 기능 만들기에 대해 자세하게 정리를 해 놓았으니 이 글을 보고 이해가 잘 되지 않는다면 이전 포스팅을 꼭 참고 하도록 하자!