问题描述
当我修改数组对象中的某个元素的时候,元素更新了,但是视图没有更新。例如下数组对象:
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))
如果你的问题和我一样,我的解决方法能够帮助你的话,麻烦能给我一个一键三连,谢谢。