博客评论后重加载评论

tonecn/src/components/Blog/BlogComment.vue

@@ -1,8 +1,9 @@
 <script setup>
 import { request } from '@/lib/request';
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { timestampToString } from '@/lib/timestampToString';
+const model = defineModel();
 const route = useRoute()
 const bloguuid = route.params.uuid;
 const blogCommentList = reactive([]);
@@ -26,6 +27,7 @@ const loadComment = async () => {
     try {
         let commentRes = await request.get(`/blogComment?bloguuid=${bloguuid}`);
         if (commentRes.code == 0) {
+            blogCommentList.splice(0, blogCommentList.length);
             blogCommentList.push(...commentRes.data);
             loadStatus.value = 1;
         } else {
@@ -36,6 +38,12 @@ const loadComment = async () => {
         loadStatus.value = -1;
     }
 }
+
+watch(model, (newValue, oldValue) => {
+    if (newValue) {
+        loadComment();
+    }
+})
 </script>
 <template>
     <el-divider></el-divider>

tonecn/src/components/Blog/BlogContentToolBar.vue

@@ -1,12 +1,13 @@
 <script setup>
 import { Star, Edit, StarFilled } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus';
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, defineEmits } from 'vue';
 import { useRoute } from 'vue-router';
 import { request } from '@/lib/request';
 import RotationVerification from '../Common/RotationVerification.vue';
 const route = useRoute()
 const bloguuid = route.params.uuid;
+const emit = defineEmits(['comment-success'])
 const inputComment = ref('')
 let inputCommentName = '';
 const toolBarVisible = ref(true);
@@ -71,6 +72,7 @@ const submitComment = async () => {
             name: inputCommentName.trim() == '' ? '匿名' : inputCommentName.trim()
         })
         if (commentRes.code == 0) {
+            emit('comment-success');
             return ElMessage.success('评论成功～');
         } else {
             throw new Error(commentRes.message);