[Vuejs]-Deleting specific comment that is attached to post vue laravel

by

0👍

In order to edit or delete a comment. You need the id of that comment. I create a very rough UI below for deleting. Updating requires a bit more complicated handling, but you get the idea:

<ul>
    <!-- If the comments is an object, pls use Object.values(comments) -->
    <li v-for="comment in comments">{{comment.text}} <button @click="deleteComment(comment.id)">Delete</button>
</ul>

<script>
 const app = new Vue({
    // ...
    methods: {
        deleteComment(commentId) {
            // ...    
        }
    }
});

</script>

-1👍

You have to use the PUT request for upating and Delete for deleting data. I edited your code.

 <script>
  const app = new Vue({
    el:'#root',
    data: {
        comments: {},
        commentBox: '',
        post: {!! $post->toJson() !!},
        user: {!! Auth::check() ? Auth::user()->toJson() : 'null' !!},
    },

    mounted() {
        this.getComments();
    },

    methods: {
        deleteComments(){
            axios.delete('/api/posts/'+this.post.id+')
                 .then((response) => {
                    console.log('Success")
                 })
                 .catch(function (error) {
                     console.log(error);
                 });
        },
        updateComment(){
            axios.put('/api/posts/'+this.post.id, this.comments)
            .then((response) => {
                console.log('Success")
            })
            .catch(function (error) {
                console.log(error);
            });

        },



    }
});

</script>

I believe your back-end delete api route is api/posts/{post}

Leave a comment