link-comment Vue component and data

link-comment-data.json

[
   {
      "commentId":368,
      "userId":1,
      "userName":"Kirk Avocado",
      "commentText":"The universe was a mistake.",
      "likeCount":1,
      "replyCount":1,
      "liked":false,
      "ownComment":true,
      "posted":1531450199815,
      "replies":[
         {
            "commentId":369,
            "userId":2,
            "userName":"roz arbel 🕍",
            "commentText":"Are you shitting me?!?!!!",
            "likeCount":1,
            "replyCount":1,
            "liked":true,
            "ownComment":false,
            "posted":1531450404281,
            "replies":[
               {
                  "commentId":370,
                  "userId":1,
                  "userName":"Kirk Avocado",
                  "commentText":"In other news, Ocasio-Cortez is dating Hitler.",
                  "likeCount":1,
                  "replyCount":2,
                  "liked":false,
                  "ownComment":true,
                  "posted":1531450447081,
                  "replies":[
                     {
                        "commentId":372,
                        "userId":2,
                        "userName":"roz arbel 🕍",
                        "commentText":"Maybe one of the weirdest takeaways from the story is that they're actually doing a remake of the movie Valley Girl. And it stars Logan Paul.",
                        "likeCount":1,
                        "replyCount":1,
                        "liked":true,
                        "ownComment":false,
                        "posted":1531452056338,
                        "replies":[
                           {
                              "commentId":373,
                              "userId":1,
                              "userName":"Kirk Avocado",
                              "commentText":"I can't wait! Just kidding, I can wait, and Chloe Bennet is cancelled.",
                              "likeCount":0,
                              "replyCount":0,
                              "liked":false,
                              "ownComment":true,
                              "posted":1531452214604,
                              "replies":[

                              ]
                           }
                        ]
                     },
                     {
                        "commentId":371,
                        "userId":2,
                        "userName":"roz arbel 🕍",
                        "commentText":"Rotfl",
                        "likeCount":0,
                        "replyCount":0,
                        "liked":false,
                        "ownComment":false,
                        "posted":1531450465543,
                        "replies":[

                        ]
                     }
                  ]
               }
            ]
         }
      ]
   }
]

link-comment.vue

<template>
    <div class="comment_div">
        <span class="comment_header">
            <span class="bold_text">{{ comment.userName }}</span>

            <span v-if="comment.likeCount > 0">
                &nbsp; <u>{{ comment.likeCount }} likes</u>
            </span>

            <span v-if="!comment.ownComment">
                &nbsp; <img class="like_comment_button" :src="thumbImage" v-on:click="toggleLike" />
            </span>

            <span v-if="comment.ownComment">
                &nbsp;
                <a href="#" v-on:click.prevent="revealEditForm">edit</a>
            </span>

            &nbsp;
            <a href="#" v-on:click.prevent="revealReplyForm">reply</a>

            <span v-if="comment.ownComment && comment.replies.length < 1">
                &nbsp;
                <a href="#" v-on:click.prevent="deleteComment">delete</a>
            </span>

            <br>
            <div class="comment_text">
                {{ comment.commentText }}
            </div>
        </span>

        <form class="edit_comment_form" v-if="showEditForm" v-on:submit.prevent="submitEdit">
            <textarea v-model="editFormCommentText" cols="100" rows="6">{{ comment.commentText }}</textarea>
            <br>
            <button type="submit">Save Edited Comment</button>
            <button type="button" v-on:click="showEditForm=false">Cancel</button>
        </form>

        <form class="reply_to_comment_form" v-if="showReplyForm" v-on:submit.prevent="submitReply">
            <textarea v-model="replyFormCommentText" placeholder="Your reply here..." cols="100" rows="6"></textarea>
            <br>
            <button type="submit">Post Reply</button>
            <button type="button" v-on:click="showReplyForm=false">Cancel</button>
        </form>

        <link-comment v-for="childComment in comment.replies"
                      :key="childComment.commentId"
                      :linkId="linkId"
                      :comment="childComment"
                      :depth="depth+1"
                      :comment-array="comment.replies"
                      :thumbs-up-image="thumbsUpImage"
                      :thumbs-up-selected-image="thumbsUpSelectedImage"></link-comment>
    </div>
</template>

<script>
    module.exports = {
        props: {
            linkId: { type: Number, required: true },
            comment: { type: Object, required: true },
            commentArray: { type: Array, required: true },
            depth: { type: Number, default: 0 },
            thumbsUpImage: { type: String, required: true },
            thumbsUpSelectedImage: { type: String, required: true }
        },
        data: function() {
            return {
                mutableComment: this.comment,
                showEditForm: false,
                showReplyForm: false,
                replyFormCommentText: '',
                editFormCommentText: this.comment.commentText
            };
        },
        computed: {
            thumbImage: function () {
                if(this.comment.liked)
                    return this.thumbsUpSelectedImage;
                else
                    return this.thumbsUpImage;
            }
        },
        methods: {
            toggleLike: function() {
                let comment = this.comment;

                if (comment.liked) {
                    comment.liked = false;
                    comment.likeCount--;
                } else {
                    comment.liked = true;
                    comment.likeCount++;
                }

                /*
                $.ajax({
                    method: 'POST',
                    url: comment.liked ? '/api/unlike_link_comment' : '/api/like_link_comment',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({ commentId: comment.commentId }),
                    dataType: 'json',
                    success: function (response) {
                        if (comment.liked) {
                            comment.liked = false;
                            comment.likeCount--;
                        } else {
                            comment.liked = true;
                            comment.likeCount++;
                        }
                    },
                    error: function (req, status, error) {
                    }
                });
                */
            },
            revealEditForm: function() {
                this.$root.$emit('hide-all-forms');
                this.showEditForm = true;
            },
            revealReplyForm: function() {
                this.$root.$emit('hide-all-forms');
                this.showReplyForm = true;
            },
            submitReply: function() {
                let data = this;

                $.ajax({
                    method: 'POST',
                    url: '/api/post_link_comment',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({
                        linkId: data.linkId,
                        parentCommentId: data.comment.commentId,
                        commentText: data.replyFormCommentText
                    }),
                    dataType: 'json',
                    success: function (comment) {
                        data.comment.replies.unshift(comment);
                        data.replyFormCommentText = '';

                        data.$root.$emit('clear-error-message');
                    },
                    error: function (req, status, error) {
                        if (req.responseText === 'EMPTY_COMMENT')
                            data.$root.$emit('display-error-message', { message: 'Comment is empty.' });
                        else
                            data.$root.$emit('display-error-message', { message: 'Unknown error. Please try again.' });
                    },
                    complete: function() {
                        data.showReplyForm = false;
                    }
                });
            },
            submitEdit: function() {
                let data = this;

                $.ajax({
                    method: 'POST',
                    url: '/api/edit_link_comment',
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({
                        commentId: data.comment.commentId,
                        commentText: data.editFormCommentText
                    }),
                    dataType: 'json',
                    success: function () {
                        data.showEditForm = false;
                        data.comment.commentText = data.editFormCommentText;

                        data.$root.$emit('clear-error-message');
                    },
                    error: function (req, status, error) {
                    }
                });
            },
            deleteComment: function() {
                let data = this;

                if (confirm('Delete your comment?')) {
                    $.ajax({
                        method: 'POST',
                        url: '/api/delete_link_comment',
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify({
                            commentId: data.comment.commentId
                        }),
                        dataType: 'json',
                        success: function () {
                            data.commentArray.splice(data.commentArray.indexOf(data.comment), 1);
                        },
                        error: function (req, status, error) {
                        }
                    });
                }
            }
        },
        mounted() {
            this.$root.$on('hide-all-forms', () => {
                this.showEditForm = false;
                this.showReplyForm = false;
            });
        }
    }
</script>