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

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

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()
    }
})

 再比如

//初始化请求数据
this.$http.get(url).then(res=>{
   const {data} = res
   this.tableData = data  
})

//评论成功后
this.tableData = this.tableData.concat(data)
//连接两个数组