fix: the value problem caused by multi-level nesting of comment components

src/views/comment/components/TargetCommentDrawer.vue

@@ -1,16 +1,13 @@
 <template>
   <a-drawer
     title="评论列表"
-    :width="isMobile()?'100%':'460'"
+    :width="isMobile() ? '100%' : '460'"
     closable
     :visible="visible"
     destroyOnClose
     @close="onClose"
   >
-    <a-row
+    <a-row type="flex" align="middle">
-      type="flex"
-      align="middle"
-    >
       <a-col :span="24">
         <a-list itemLayout="horizontal">
           <a-list-item>
@@ -25,7 +22,7 @@
       </a-col>
       <a-divider />
       <a-col :span="24">
-        <a-empty v-if="comments.length==0" />
+        <a-empty v-if="comments.length == 0" />
         <TargetCommentTree
           v-else
           v-for="(comment, index) in comments"
@@ -48,27 +45,19 @@
     </div>
     <a-modal
       v-if="selectedComment"
-      :title="'回复给：'+selectedComment.author"
+      :title="'回复给：' + selectedComment.author"
       v-model="replyCommentVisible"
       @close="onReplyClose"
       destroyOnClose
     >
       <template slot="footer">
-        <a-button
+        <a-button key="submit" type="primary" @click="handleCreateClick">
-          key="submit"
-          type="primary"
-          @click="handleCreateClick"
-        >
           回复
         </a-button>
       </template>
       <a-form layout="vertical">
         <a-form-item>
-          <a-input
+          <a-input type="textarea" :autosize="{ minRows: 8 }" v-model="replyComment.content" />
-            type="textarea"
-            :autosize="{ minRows: 8 }"
-            v-model="replyComment.content"
-          />
         </a-form-item>
       </a-form>
     </a-modal>
@@ -129,7 +118,7 @@ export default {
     }
   },
   watch: {
-    visible: function(newValue, oldValue) {
+    visible(newValue, oldValue) {
       this.$log.debug('old value', oldValue)
       this.$log.debug('new value', newValue)
       if (newValue) {
@@ -157,6 +146,8 @@ export default {
       this.replyCommentVisible = true
       this.replyComment.parentId = comment.id
       this.replyComment.postId = this.id
+
+      console.log('comment reply', this.replyComment)
     },
     handleCreateClick() {
       if (!this.replyComment.content) {
@@ -166,6 +157,8 @@ export default {
         })
         return
       }
+      console.log('target:', this.target)
+      console.log('replyComment:', this.replyComment)
       commentApi.create(this.target, this.replyComment).then(response => {
         this.$message.success('回复成功！')
         this.replyComment = {}

src/views/comment/components/TargetCommentTree.vue

@@ -2,17 +2,11 @@
   <div>
     <a-comment>
       <template slot="actions">
-        <a-dropdown
+        <a-dropdown :trigger="['click']" v-if="comment.status === 'AUDITING'">
-          :trigger="['click']"
-          v-if="comment.status === 'AUDITING'"
-        >
           <span href="javascript:void(0);">通过</span>
           <a-menu slot="overlay">
             <a-menu-item key="1">
-              <span
+              <span href="javascript:void(0);" @click="handleEditStatusClick('PUBLISHED')">通过</span>
-                href="javascript:void(0);"
-                @click="handleEditStatusClick('PUBLISHED')"
-              >通过</span>
             </a-menu-item>
             <a-menu-item key="2">
               <span href="javascript:void(0);">通过并回复</span>
@@ -20,10 +14,7 @@
           </a-menu>
         </a-dropdown>
 
-        <span
+        <span v-else-if="comment.status === 'PUBLISHED'" @click="handleReplyClick">回复</span>
-          v-else-if="comment.status === 'PUBLISHED'"
-          @click="handleReplyClick"
-        >回复</span>
 
         <a-popconfirm
           v-else-if="comment.status === 'RECYCLE'"
@@ -45,38 +36,16 @@
           <span>回收站</span>
         </a-popconfirm>
 
-        <a-popconfirm
+        <a-popconfirm :title="'你确定要永久删除该评论？'" @confirm="handleDeleteClick" okText="确定" cancelText="取消">
-          :title="'你确定要永久删除该评论？'"
-          @confirm="handleDeleteClick"
-          okText="确定"
-          cancelText="取消"
-        >
           <span>删除</span>
         </a-popconfirm>
-
       </template>
-      <a
+      <a slot="author" :href="comment.authorUrl" target="_blank">
-        slot="author"
+        <a-icon type="user" v-if="comment.isAdmin" style="margin-right: 3px;" />
-        :href="comment.authorUrl"
+        {{ comment.author }}-->{{ comment.id }}
-        target="_blank"
-      >
-        <a-icon
-          type="user"
-          v-if="comment.isAdmin"
-          style="margin-right: 3px;"
-        />
-        {{ comment.author }}
       </a>
-      <a-avatar
+      <a-avatar size="large" slot="avatar" :src="avatar" :alt="comment.author" />
-        size="large"
+      <p slot="content" v-html="content"></p>
-        slot="avatar"
-        :src="avatar"
-        :alt="comment.author"
-      />
-      <p
-        slot="content"
-        v-html="content"
-      ></p>
       <a-tooltip slot="datetime">
         <span slot="title">{{ comment.createTime | moment }}</span>
         <span>{{ comment.createTime | timeAgo }}</span>
@@ -86,6 +55,8 @@
           v-for="(child, index) in comment.children"
           :key="index"
           :comment="child"
+          v-on="$listeners"
+          v-bind="$attrs"
           @reply="handleReplyClick"
           @delete="handleDeleteClick"
           @editStatus="handleEditStatusClick"
@@ -115,7 +86,6 @@ export default {
   },
   methods: {
     handleReplyClick() {
-      console.log(this.comment)
       this.$emit('reply', this.comment)
     },
     handleEditStatusClick(status) {