如截图所示，我新增了一条评论之后，对应的icon图标显示评论数量并没有立刻，只有通过刷新网页才能显示新的评论数量，
若要做到实时同步评论数量，该如何做到？
给出底部布局的代码：
<template>
<div class="article-container">
<van-nav-bar
class="page-nav-bar"
left-arrow
title="黑马头条"
@click-left="clickLeftBack"
></van-nav-bar>
<div class="main-wrap">
<div v-if="loading" class="loading-wrap">
<van-loading
color="#3296fa"
vertical
>加载中</van-loading>
</div>
<div v-else-if="article.title" class="article-detail">
<h1 class="article-title">{{ article.title }}</h1>
<van-cell class="user-info" center :border="false">
<van-image
class="avatar"
slot="icon"
round
fit="cover"
:src="article.aut_photo"
/>
<div slot="title" class="user-name">{{ article.aut_name }}</div>
<div slot="label" class="publish-date">{{ article.pubdate | relativeTime }}</div>
<follow-user
class="follow-btn"
v-model="article.is_followed"
:user-id="article.aut_id"
/>
</van-cell>
<div
class="article-content markdown-body"
v-html="article.content"
ref="article-content"
></div>
<van-divider>正文结束</van-divider>
<comment-list
:source="article.art_id"
:list="commentList"
@onload-success="totalCommentCount = $event.total_count"
/>
<div class="article-bottom">
<van-button
class="comment-btn"
type="default"
round
size="small"
@click="isPostShow = true"
>写评论</van-button>
<van-icon
class="comment-icon"
name="comment-o"
:info="totalCommentCount"
@click="isPostShow = true"
/>
<collect-article
class="btn-item"
v-model="article.is_collected"
:article-id="article.art_id"
/>
<like-article
class="btn-item"
v-model="article.attitude"
:article-id="article.art_id"
/>
<van-icon name="share" color="#777777"></van-icon>
</div>
<van-popup
v-model="isPostShow"
position="bottom">
<comment-post
:target="article.art_id"
@post-success="onPostSuccess"
/>
</van-popup>
</div>
<div v-else-if="errStatus === 404" class="error-wrap">
<van-icon name="failure" />
<p class="text">该资源不存在或已删除！</p>
</div>
<div v-else class="error-wrap">
<van-icon name="failure" />
<p class="text">内容加载失败！</p>
<van-button
class="retry-btn"
@click="loadArticle"
>点击重试</van-button>
</div>
</div>
</div>
</template>
<script>
import { getArticleById } from '../../api/article'
import { ImagePreview } from 'vant'
// import { addFollow, deleteFollow } from '../../api/user'
import FollowUser from '@/components/follow-user'
import CollectArticle from '@/components/collect-article'
import LikeArticle from '@/components/like-article'
import CommentList from '@/views/article/component/comment-list'
import CommentPost from '@/views/article/component/comment-post'
export default {
name: 'ArticleIndex',
components: {
CollectArticle,
FollowUser,
LikeArticle,
CommentList,
CommentPost
},
data () {
return {
article: {}, // 文章详情
loading: true, // 加载中的 loading 状态
errStatus: 0, // 失败的状态码
followLoading: false,
totalCommentCount: 0,
isPostShow: false, // 控制发布评论的显示状态
commentList: [], // 评论列表
isReplyShow: false,
currentComment: {} // 当前点击回复的评论项
}
},
props: {
articleId: {
type: [Number, String, Object],
required: true
}
},
created () {
this.loadArticle()
},
methods: {
clickLeftBack () {
this.$router.back()
console.log(this.$router, '<<< 路由页面变化?')
},
async loadArticle () {
try {
const { data } = await getArticleById(this.articleId)
console.log(data, '<<<文章详情data')
// 数据驱动视图存在延迟
this.article = data.data
// 初始化图片点击的预览
// console.log(this.$refs['article-content'])
setTimeout(() => {
console.log(this.$refs['article-content'])
this.previewImage()
}, 0)
// 请求成功 关闭loading
// this.loading = false
} catch (e) {
this.$toast('获取文章失败 请重试')
if (e.repsonse && e.repsonse.status === 404) {
this.errStatus = 404
}
console.log(e)
}
this.loading = false
},
previewImage () {
// 得到所有的img节点
const articleContent = this.$refs['article-content']
const imgs = articleContent.querySelectorAll('img')
const images = []
imgs.forEach((img, index) => {
images.push(img.src)
console.log(images)
img.onclick = () => {
ImagePreview({
// 预览的图片数组
images,
startPosition: index
})
}
})
},
onPostSuccess (data) {
// 关闭弹层
this.isPostShow = false
// 发布内容放到顶部
this.commentList.unshift(data.new_obj)
}
}
}
</script>
<style scoped lang="less">
@import "./github-markdown.css";
.article-container {
.main-wrap {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: #fff;
}
.article-detail {
position: fixed;
left: 0;
right: 0;
top: 92px;
bottom: 88px;
overflow-y: scroll;
background-color: #fff;
.article-title {
font-size: 40px;
padding: 50px 32px;
margin: 0;
color: #3a3a3a;
}
.user-info {
padding: 0 32px;
.avatar {
width: 70px;
height: 70px;
margin-right: 17px;
}
.van-cell__label {
margin-top: 0;
}
.user-name {
font-size: 24px;
color: #3a3a3a;
}
.publish-date {
font-size: 23px;
color: #b7b7b7;
}
.follow-btn {
width: 170px;
height: 58px;
}
}
.article-content {
padding: 55px 32px;
/deep/ p {
text-align: justify;
}
}
}
.loading-wrap {
padding: 200px 32px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
.error-wrap {
padding: 200px 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #fff;
.van-icon {
font-size: 122px;
color: #b4b4b4;
}
.text {
font-size: 30px;
color: #666666;
margin: 33px 0 46px;
}
.retry-btn {
width: 280px;
height: 70px;
line-height: 70px;
border: 1px solid #c3c3c3;
font-size: 30px;
color: #666666;
}
}
.article-bottom {
position: fixed;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
height: 88px;
border-top: 1px solid #d8d8d8;
background-color: #fff;
.comment-btn {
width: 282px;
height: 46px;
border: 2px solid #eeeeee;
font-size: 30px;
line-height: 46px;
color: #a7a7a7;
}
/deep/ .van-icon {
font-size: 40px;
}
.comment-icon {
top: 2px;
color: #777;
.van-info {
font-size: 16px;
background-color: #e22829;
}
}
.btn-item {
border: none;
padding: 0;
height: 40px;
line-height: 40px;
color: #777777
}
.collect-btn--collected {
color: #ffa500;
}
.like-btn--liked {
color: #e5645f;
}
}
}
</style>
