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

问题背景

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

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

<tr v-for="(item, index) in params.userSubGroupDTOList" :key="`handle_item_${index}`">
      <td>{{params.userSubGroupDTOList[index].userSubgroupFlag}}</td>
      <td>
      <Input :maxlength="20" v-model="params.userSubGroupDTOList[index].userSubgroupName"/>
       </td>
        <td>
         <InputNumber v-model.trim="params.userSubGroupDTOList[index].userSubgroupRatio" 
             :min=0 
             :max=100 
             :formatter="formatNumber"
             @on-change="SubgroupPeople(index)"
              />
        <td>{{params.userSubGroupDTOList[index].userSubgroupPeople}}</td>
</tr>

问题点

• 开始的时候使用了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])

问题解决