$set在项目中的实用

2024年1月6日 194次阅读 来源: yang

最近$set疯狂用， 记录一下
评论页面的每条留言的状态 和留言下每条留言的状态 强制刷新
数据的格式是

[
 {demo1
  content:'',
  id:1,
  replyList:[{
   replyContent:'',
   replyId:0
   },{
  replyContent:'',
   replyId:1}]
  },
demo2
  content:'',
  id:1,
  replyList:[{
   replyContent:'',
   replyId:0
   },{
  replyContent:'',
   replyId:1}]
  },...
]

针对一级回复和二级回复的回复状态点击时每次只能显示一个回复框的封装

async closeDialog () {
      let self = this
      self.componentData.list.forEach((value, key) => {
        let obj = { ...value }
        obj.commentVisiable = false
        if ('commentReplyList' in obj) {
          obj.commentReplyList = obj.commentReplyList.map((item) => {
            let newList = { ...item }
            newList.replyVisiable = false
            return newList
          })
        }
        self.$set(self.componentData.list, key, obj)
      })
    },

一级

forAnswer (item, index) {
      let newVal = Object.assign(item)
      newVal.commentVisiable = !newVal.commentVisiable
      if ('commentReplyList' in newVal) {
        newVal.commentReplyList = newVal.commentReplyList.map((item) => {
          let newList = { ...item }
          newList.replyVisiable = false
          return newList
        })
      }
      this.$set(this.componentData.list, index, newVal)
    },
    // 一级回复
    async answerAction (item, index, type) {
      let self = this
      if (type === 1) {
        await self.closeDialog()
      }
      this.forAnswer(item, index)
    },

二级回复

// 二级回复
    forReply (reply, indexa, indexb) {
      let newVal = Object.assign(reply)
      newVal.replyVisiable = !newVal.replyVisiable
      let secondList = [...this.componentData.list[indexa].commentReplyList]
      secondList[indexb] = newVal
      let newComponentOjb = Object.assign(this.componentData.list[indexa])
      newComponentOjb.commentReplyList = secondList
      this.$set(this.componentData.list, indexa, newComponentOjb)
    },
    // 二级回复
    async replyAction (reply, indexa, indexb, type) {
      let self = this
      if (type === 1) {
        await self.closeDialog()
      }
      this.forReply(reply, indexa, indexb)
    },

提交回复

//一级
// 提交回复
    answerSubmit (item, index) {
      this.forAnswer(item, index)
      var self = this
      let userCode = this.componentData.list[index].userCode
      // let commentId = this.componentData.list[index].commentId
      this.axios
        .post(self.publicPath + '/comment/addCommentReply', {
          commentId: item.id,
          replyUserCode: userCode,
          replyContent: item.replyContent
        })
        .then(res => {
          if (res.data.code == 1) {
            self.$message.success('发布成功')
            self.commentContent = ''
            self.$emit('childFn', item.commentTargetId)
          } else {
            self.$message.error('发布失败')
          }
        })
    },
    原文作者：yang
    原文地址: https://segmentfault.com/a/1190000020340184
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞