博客评论后重加载评论

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);

tonecn/src/views/BlogContent.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { request } from '@/lib/request';
-import { onMounted, reactive, ref, nextTick } from 'vue';
+import { onMounted, ref } from 'vue';
 import { timestampToString } from '../lib/timestampToString'
 import { useRoute } from 'vue-router'
 import { Marked } from 'marked';
@@ -14,6 +14,7 @@ const loadStatus = ref(0);// 0加载中 -1加载失败 -2文章不存在或不
 const route = useRoute();
 const blogContent = ref('');
 const blogInfo = ref({});
+const blogCommentReload = ref(false);
 
 const marked = new Marked(
     markedHighlight({
@@ -66,9 +67,9 @@ onMounted(async () => {
             <div v-html="blogContent" id="blogContentContainer"></div>
         </div>
 
-        <BlogComment v-if="loadStatus == 1" />
+        <BlogComment v-if="loadStatus == 1" v-model="blogCommentReload"/>
     </div>
-    <BlogContentToolBar />
+    <BlogContentToolBar @comment-success="blogCommentReload = true;"/>
 </template>
 <style scoped>
 .bcc {