首页 > 其他 > 详细

vue 列表 点赞/评论 局部刷新

时间:2021-07-09 18:10:32      阅读:40      评论:0      收藏:0      [点我收藏+]

在遍历数据时 前端手动增加字段用来暂存点赞或刷新的数据

this.list.forEach(element => {
     if(!element.Praise){  //点赞数量
         element.Praise = {Count:0,Data:[]}
     }
     if(!element.Comment){  //评论数量及内容
         element.Comment = {Count:0,Data:[]}
     }
});

当接口返回成功信息时再进行操作,可以保证前端和数据库的数据是一致的

praise(item,bool){
     PraiseMQ({data}).then(res => {
         if(!res.iserror){
             if (bool) {
                 item.PraiseDone = true
                 item.Praise.Count += 1
                 // Toast(‘点赞成功‘)
             } else {
                 item.PraiseDone = false
                 item.Praise.Count -= 1
             }
         }else{
             Toast(res.errormsg)
         }
     })
 },
Comment({data}).then(res => {
    if(!res.iserror){
        Toast(‘评论成功‘)
        this.isDiscuss = false
        let obj={
            UserName:res.data.UserName,
            Message:res.data.Message
        }
        this.currentItem.Comment.Data.push(obj)
        this.currentItem.Comment.Count += 1
        this.$forceUpdate()
    }
})

 

vue 列表 点赞/评论 局部刷新

原文:https://www.cnblogs.com/MrSlow/p/14990696.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!