记录一个Vue中改变循环遍历后的数据的坑

问题背景

• 使用v-for遍历对象渲染数据，被渲染的数据改变时另一数据需要联动改变

  
  
  场景图
• Vue中对数组和对象的改变不能触发视图的改变，所以需要使用Vue.$set()来改变数据
• html部分代码

      {{params.userSubGroupDTOList[index].userSubgroupFlag}}
      
      
       
        
         
        {{params.userSubGroupDTOList[index].userSubgroupPeople}}

问题点

• 开始的时候使用了set被改变的属性名，发现并不起作用,e是被改变对象的下标index此处已经全局使用了Vue.$set(),所以直接用this.$set

let count = this.params.userGroupCount*this.params.userSubGroupDTOList[e].userSubgroupRatio
this.$set(this.params.userSubGroupDTOList[e],'userSubgroupRatio',count )

问题原因

• 此处是复杂对象，改变的是对象下的子对象的数据，所以需要set被改变的那个对象

this.params.userSubGroupDTOList[e].userSubgroupPeople=this.params.userGroupCount*this.params.userSubGroupDTOList[e].userSubgroupRatio
this.$set(this.params.userSubGroupDTOList,e,this.params.userSubGroupDTOList[e])

问题解决