显示带有评论和回复的讨论论坛

Question

我正在建立一个包含评论和评论回复的讨论论坛，但是我无法以合理的方式显示这些评论。现在，我以相同的方式显示评论和回复，只是在带有小缩进的回复的表中，这是不理想的，因为该表会按时间显示这些评论，因此，如果有人回复旧评论，则回复将显示在顶部而不是父注释的下方。

这就是我现在显示的方式

显示代码

<el-table
    style="border-radius: 20px !important"
    :data="comments">
    <el-table-column>
        <template slot-scope="scope">
            <div v-if="scope.row.parent_id === null">

                <el-row style="margin-bottom: 15px">
                    <el-col :span="20" v-if="scope.row.discussion_forum.anonymous === 0">
                        <p class="comment-user-name">{{scope.row.user.name}} dice: </p>
                    </el-col>
                    <el-col :span="20" v-if="scope.row.discussion_forum.anonymous === 1">
                        <p class="comment-user-name">Anónimo dice: </p>
                    </el-col>
                    <el-col :span="4">
                        <div style="text-align: end"
                            v-if="scope.row.user_id === $page.auth.user.auth.user.id">
                            <div class="btn-link-edit action-button"
                                @click="edit(scope.row)">
                                    <i class="fas fa-pencil-alt"></i>
                            </div>
                            <div class="btn-link-delete action-button"
                                @click="remove(scope.row)">
                                    <i class="fas fa-trash"></i>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div style="text-align: end"
                             v-if="scope.row.user_id !== $page.auth.user.auth.user.id
                             && $page.auth.user.auth.user.id === 1 ">
                             <div class="btn-link-delete action-button"
                                 @click="remove(scope.row)">
                                    <i class="fas fa-trash"></i>
                             </div>
                         </div>
                     </el-col>
                 </el-row>
                 <el-row style="margin-top: 10px">
                     <p class="comment-comment">{{scope.row.comment}}</p>
                 </el-row>
                 <el-row class="fa-pull-right pb-1">
                     <p class="comment-user-time ">{{formatDate(scope.row.comment_time)}}</p>
                 </el-row>
             </div>
             <div v-else style="margin-left: 30px">
                 <el-row style="margin-bottom: 15px">
                      <el-col :span="20" v-if="scope.row.discussion_forum.anonymous === 0">
                          <p class="comment-user-name">{{scope.row.user.name}} dice en
                                             respuesta a: </p>
                      </el-col>
                      <el-col :span="20" v-if="scope.row.discussion_forum.anonymous === 1">
                          <p class="comment-user-name">Anónimo dice en respuesta: </p>
                      </el-col>
                      <el-col :span="4">
                          <div style="text-align: end"
                              v-if="scope.row.user_id === $page.auth.user.auth.user.id">
                              <div class="btn-link-edit action-button"
                                   @click="edit(scope.row)">
                                     <i class="fas fa-pencil-alt"></i>
                              </div>
                              <div class="btn-link-delete action-button"
                                  @click="remove(scope.row)">
                                    <i class="fas fa-trash"></i>
                              </div>
                          </div>
                      </el-col>
                      <el-col :span="4">
                          <div style="text-align: end"
                              v-if="scope.row.user_id !== $page.auth.user.auth.user.id
                              && $page.auth.user.auth.user.id === 1 ">
                              <div class="btn-link-delete action-button"
                                  @click="remove(scope.row)">
                                     <i class="fas fa-trash"></i>
                              </div>
                          </div>
                      </el-col>
                  </el-row>
                  <el-row style="margin-top: 10px">
                      <p class="comment-comment">{{scope.row.comment}}</p>
                   </el-row>
                   <el-row class="fa-pull-right pb-1">
                       <p class="comment-user-time ">{{formatDate(scope.row.comment_time)}}</p>
                   </el-row>
               </div>
           </template>
      </el-table-column>
 </el-table>

如果还有另一种方法可以执行此操作，同时仍保持删除每个注释的功能，那么这样做的主要原因是因为我不确定如何维护删除注释的功能。注释。该视图适用于论坛的创建者，因此他们确实可以删除不需要的评论。

这是我当前删除评论的方式（表格行）

remove(row) {
    this.$confirm('Desea borrar este Comentario? Esto es permanente.',
            'Advertencia', {
                confirmButtonText: 'Si',
                cancelButtonText: 'Cancelar',
                cancelButtonClass: 'el-button--info',
                confirmButtonClass: 'el-button--warning',
                type: 'warning'
        }).then(() => {
        this.loading = true;
        this.$inertia.delete(this.baseUrl + '/' + row.id)
            .then(
               () => {
                   this.$message({
                       type: 'success',
                       message: 'Eliminado correctamente.'
                   });

                   this.comments = this.$page.comments;
                   this.loading = false
               },
               (res) => {
                   this.$message.error(parseError(res)[0]);
                   this.loading = false;
                }
            )
    })
},

我如何以更令人满意的方式显示这些内容，同时仍然能够为用户删除特定评论并正确显示这些评论及其回复？