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

您所在的位置：网站首页 › vuejson转数组 › Vue 对象数组修改数组中的对象的某个元素，元素更新了视图不更新的问题解决

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

2023-06-15 13:38| 来源: 网络整理| 查看: 265

问题描述

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

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))

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

【本文地址】

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

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

今日新闻

推荐新闻