JSFiddle - React, Tailwind, and code Playground

by Taras Vasylivskyy

HTML

<template>
  <div class="sub-comments">
    <div
      class="sub-comments__more"
      v-if="short && currentComment.Comments.length > 2"
    >
      <a
        href="#"
        @click.prevent="openCommentsModal(currentComment)"
      >View {{currentComment.Comments.length - lastSubcomments.length}} more comment</a>
    </div>
    <div class="sub-comments__list">
      <div
        class="sub-comments__item"
        v-if="getCommentCount(currentComment)"
        v-for="item in lastSubcomments"
        :key="item.Id"
      >
        <div class="sub-comments__item-inner">
          <div class="sub-comments__user">
            <userBlock
              position="subcomment"
              :comment="item"
              :photo="getCommentAvatar(item)"
              :title="getTitle(item)"
              :create="getDataCreate(item)"
            >
            </userBlock>
          </div>
          <div
            v-show="!(isEditSubComment === item.Id)"
            class="sub-comments__text"
          >{{item.Message}}</div>
        </div>

        <div
          v-if="isEditSubComment === item.Id"
          class="sub-comments__edit"
        >
          <div class="sub-comments__edit-text">
            <textarea
              placeholder="Edit a comment…"
              v-model.trim="editSubComment"
            ></textarea>
          </div>
          <div class="sub-comments__edit-btns">
            <button
              @click="cancelEditSubComment"
              class="sub-comments__edit-btn sub-comments__edit-btn_cancel"
            >Cancel</button>

            <button
              @click="updateSubComment()"
              class="sub-comments__edit-btn sub-comments__edit-btn_save"
            >Save</button>
          </div>
        </div>

      </div>
      <div
        v-if="!getCommentCount(currentComment)"
        class="sub-comments__item_empty"
      >
        <p>No comments yet</p>
        <p>Be the first to comment.</p>
      </div>
    </div>

    <div...