Loyd
2 months ago
287
2
Vue

Clear the DOM after delete

Posted 2 months ago by Loyd

How can i clear the DOM after deleting in vuejs

my method

			deleteComment(e) {
				let data = new FormData();
				data.append('_method', 'DELETE')

				axios.post(`/post/${this.post.slug}/comment/`+e.id, data)
				.then((response) => {
					this.deletedComment = response.data
			})

the whole component

<template>
	<div>
        <!-- Single post comment -->
        <li class="image__comment">
            <div class="comment__container">
                <div class="user__comment">
                    <a href="">
                        <!-- <img src="" alt="avatar" class="comments-avatar"> -->
                        <avatar :username="comment.user.username" :size="30" :rounded="true"></avatar>
                    </a>
                    <a href="">
                        <span class="image__comment-author">{{ comment.user.username }}</span>
                    </a>
                    <span v-if="editable == false || editable != comment.id">{{ comment.body }}</span>
			        <input v-if="editable == comment.id" v-model="comment.body" type="text">

			        <svg v-on:click="editable = comment.id" v-if="editable != comment.id" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2196F3" fill="none" stroke-linecap="round" stroke-linejoin="round">
					  <path stroke="none" d="M0 0h24v24H0z"/>
					  <path d="M9 7 h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3" />
					  <path d="M9 15h3l8.5 -8.5a1.5 1.5 0 0 0 -3 -3l-8.5 8.5v3" />
					  <line x1="16" y1="5" x2="19" y2="8" />
					</svg>

					<svg v-if="editable == comment.id" v-on:click="updateComment(comment)" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-checkbox" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#4CAF50" fill="none" stroke-linecap="round" stroke-linejoin="round">
					  <path stroke="none" d="M0 0h24v24H0z"/>
					  <polyline points="9 11 12 14 20 6" />
					  <path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" />
					</svg>

					<svg @click="deleteComment(comment)" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2196F3" fill="none" stroke-linecap="round" stroke-linejoin="round">
					  <path stroke="none" d="M0 0h24v24H0z"/>
					  <line x1="4" y1="7" x2="20" y2="7" />
					  <line x1="10" y1="11" x2="10" y2="17" />
					  <line x1="14" y1="11" x2="14" y2="17" />
					  <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
					  <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
					</svg>
                </div>
                <div class="timeAndReplyBtn">
                    <span class="reply__time">{{ comment.created_at }}</span>
                    <span class="reply__button" @click="addingReply = !addingReply">
                    	{{ addingReply ? 'cancel' : 'reply' }}
                	</span>
                </div>
            </div>
            <i class="fas fa-heart heart"></i>
        </li>

        <!-- Add reply textbox -->
    	<div class="reply__area" v-if="addingReply">
    		<textarea cols="40" v-model="body"></textarea>
    		<i class="fas fa-location-arrow" @click="addReply"></i>
		</div>

        <!-- Replies -->
        <replies ref="replies" :comment="comment"></replies>      
    </div>
</template>	

<script>
    import Avatar from 'vue-avatar'
    import Replies from './Replies.vue'
	export default{
		components: {
			Replies,
			Avatar
		},

		data() {
			return {
				editable: false,
				body: '',
				addingReply: false,
			}
		},

		props: {
			comment: {
				required: true,
				default: () => ({})
			},

			post:{
				required: true,
				default: () => ({})
			}
		},


		methods: { 
			deleteComment(e) {
				let data = new FormData();
				data.append('_method', 'DELETE')

				axios.post(`/post/${this.post.slug}/comment/`+e.id, data)
				.then((response) => {
					this.deletedComment = response.data
				})
			},

			updateComment(e) {
				this.editable = false
				let data = new FormData();
				data.append('_method', 'PATCH')
				data.append('body', e.body)

				axios.post(`/post/${this.post.slug}/comment/`+e.id, data)
			},

			addReply() {

				if (! this.body) return

				axios.post(`/comments/${this.post.slug}`, {
					comment_id: this.comment.id,
					body: this.body
				}).then(({ data }) =>{
					this.body = ''
					this.addingReply = false
					this.$refs.replies.addReply(data)
				})
			}
		}
	}
</script>

Please sign in or create an account to participate in this conversation.