Vue 对象数组修改数组中的对象的某个元素，元素更新了视图不更新的问题解决

问题描述

当我修改数组对象中的某个元素的时候，元素更新了，但是视图没有更新。例如下数组对象：

 attendanceTime: [
          { workDays: '周一', shiftId: '1', shiftTime: '' },
          { workDays: '周二', shiftId: '2', shiftTime: '' },
          { workDays: '周三', shiftId: '3', shiftTime: '' },
          { workDays: '周四', shiftId: '4', shiftTime: '' },
          { workDays: '周五', shiftId: '5', shiftTime: '' },
          { workDays: '周六', shiftId: '6', shiftTime: '' },
          { workDays: '周日', shiftId: '7', shiftTime: '' }
        ],

当我forEach循环遍历该数组并修改每个对象中的shiftId的时候，shiftId数据发生了改变，但是视图没有更新的情况下我尝试了如下几种方案，但是没有成功：

• this.$forceUpdate()方式强制更新视图；
• this.$set() 方式渲染数据，企图让Vue监听到数据发生改变。但是我尝试的连数据都修改不了，可能有问题；
• item.shiftId='wang'直接塞值数据发生改变，但是视图不更新。

我的解决方案

通过Vue 深拷贝JSON.parse(JSON.stringify())类型转换的方式完成。
原理： 用JSON.stringify将对象转成JSON字符串，再用JSON.parse()把字符串解析成对象，一去一来，新的对象产生了，而且对象会开辟新的栈，实现深拷贝。

		let arrays=JSON.parse(JSON.stringify(this.form.attendanceTime))
        arrays.forEach(item=>{
          item.shiftId='123'
        })
        this.form.attendanceTime=JSON.parse(JSON.stringify(arrays))

如果你的问题和我一样，我的解决方法能够帮助你的话，麻烦能给我一个一键三连，谢谢。