修复子评论无法显示的问题

mryanshenghong · Jul 26, 2020 · 5310f3b · 5310f3b
1 parent ead7f03
commit 5310f3b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
@@ -15,6 +15,8 @@
       :comment="comment"
       :visibleNestedCommentBox="visibleNestedCommentBox"
       :showNestedCommentBox="() => showNestedCommentBox(index.toString())"
+      :isNested="false"
+      :getComments="() => getComments()"
     >
       <div class="childComment" v-if="comment.comments.length >0">
         <CommentItem
@@ -24,6 +26,8 @@
           :comment="childComment"
           :visibleNestedCommentBox="visibleNestedCommentBox"
           :showNestedCommentBox="() => showNestedCommentBox(`${index}-${subindex}`)"
+          :isNested="true"
+          :getComments="() => getComments()"
         />
       </div>
     </CommentItem>
@@ -51,6 +55,10 @@ export default class Comment extends Vue {
   public commentInput: string = '';
   public comments: any[] = []
   public showNestedCommentBox(index: string): void {
+    if (index === this.visibleNestedCommentBox) {
+      this.visibleNestedCommentBox = null;
+      return;
+    }
     this.visibleNestedCommentBox = index;
   }
 
@@ -66,10 +74,14 @@ export default class Comment extends Vue {
       repliedTo: null
     }
     const token = localStorage.getItem('token');
-    newComment(nComment, token!).then(async (res) => await this.getComments()).catch(err => this.$message.error('can not comment'))
+    newComment(nComment, token!).then(async (res) => await this.getComments()).catch((err) => this.$message.error('can not comment'))
     this.commentInput = ''
   }
 
+  public async mounted() {
+    await this.getComments()
+  }
+
   private async getComments() {
     const token = localStorage.getItem('token');
     const res: any = await queryComments(this.$props.blogId, token!)
@@ -80,9 +92,7 @@ export default class Comment extends Vue {
     }
   }
 
-  public async mounted() {
-    await this.getComments()
-  }
+
 }
 </script>
 <style lang="scss" scoped>

diff --git a/src/components/comments/components/CommentItem.vue b/src/components/comments/components/CommentItem.vue
@@ -50,8 +50,11 @@ import { newComment, IComment } from '@/api/comments';
   props: {
     idx: String,
     comment: Object,
+    visibleNestedCommentBox: String,
+    isNested: Boolean,
+
     showNestedCommentBox: Function,
-    visibleNestedCommentBox: String
+    getComments: Function,
   }
 })
 export default class CommentItem extends Vue {
@@ -61,12 +64,14 @@ export default class CommentItem extends Vue {
     const comment = this.$props.comment;
     const nComment: IComment = {
       blogId: comment.blogId,
-      parentId: comment._id,
+      parentId: this.$props.isNested ? comment.parentId : comment._id,
       repliedTo: comment.commentedBy,
       content: this.inputComment
     }
     const token = localStorage.getItem('token');
-    const res = await newComment(nComment, token!).then(res => res).catch(err => err)
+    await newComment(nComment, token!).then(async () => this.$props.getComments()).catch((err) => err)
+    this.inputComment = ''
+    this.$props.showNestedCommentBox()
   }
 
   private format(time: string) {