$set在项目中的实用

2019-09-10 admin

最近$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('发布失败')
          }
        })
    },

[转载]原文链接:https://segmentfault.com/a/1190000020340184

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74733.html

文章标题:$set在项目中的实用

相关文章
JavaScript中的call方法和apply方法使用对比
方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,?? [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明: call 方法可以用来代替另一个对象调用一个方法。c...
2017-03-29
JavaScript中的cacheStorage使用详解
localStorage 应是家喻户晓的?但本地存储这个家族可远不止它。以前扯过 sessionStorage,现在还有个神奇的 CacheStorage。它用来存储 Response 对象的。也就是说用来对 HTTP ,响应做缓存的。虽然...
2017-03-27
javascript 中的try catch应用总结
<script language="javascript"> try { throw new Error(10,"asdasdasd") } catch (e) { alert(e.mes...
2017-04-05
详解JavaScript ES6中的Generator
今天讨论的新特性让我非常兴奋,因为这个特性是 ES6 中最神奇的特性。 这里的“神奇”意味着什么呢?对于初学者来说,该特性与以往的 JS 完全不同,甚至有些晦涩难懂。从某种意义上说,它完全改变了这门语言的通常行为,这不是“神奇”是什么呢。 ...
2017-03-27
详细解读AngularJS中的表单验证编程
需求 Name 必填 Username 非必填,最小长度3,最大长度8 Email 非必填,但必须是合法的email 验证未通过的表单不能提交 显示一个必填或者非法email格式的错误信息 如果正确提交就弹出一个祝贺信息 现在知道我们的...
2017-03-25
在JavaScript的AngularJS库中进行单元测试的方法
开发者们都一致认为单元测试在开发项目中十分有好处。它们帮助你保证代码的质量,从而确保更稳定的研发,即使需要重构时也更有信心。 **?测试驱动开发流程图** AngularJS的代码声称其较高的可测性确实是合理的。单单文档中列出端对端的测试...
2017-03-24
详细解读JavaScript编程中的Promise使用
Promise核心说明 尽管Promise已经有自己的规范,但目前的各类Promise库,在Promise的实现细节上是有差异的,部分API甚至在意义上完全不同。但Promise的核心内容,是相通的,它就是then方法。在相关术语中,pro...
2017-03-27
js+html5实现可在手机上玩的拼图游戏
本文实例讲述了js+html5实现可在手机上玩的拼图游戏。分享给大家供大家参考。具体如下: 手机版的拼图。pc上用Chrome 或者 Firefox var R=(function(){ /*右边菜单*/ functi...
2017-03-27
整理AngularJS中的一些常用指令
AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令: ng-app - 该指令启动一个AngularJS应用。 ng-init - 该指令初始化应用程序数据。 ng-model - 此指令定义的...
2017-03-24
JavaScript中的slice()方法使用详解
此方法提取字符串的一部分,并返回一个新的字符串。 语法 string.slice( beginslice [, endSlice] ); 下面是参数的详细信息: beginSlice : 从零开始的索引位置开始提取 endSlice :...
2017-03-24
回到顶部