vue对象拷贝,解决由于引用赋值修改原对象的方式
更新时间:2023年10月18日 09:58:41 作者:qq_41831968
这篇文章主要介绍了vue对象拷贝,解决由于引用赋值修改原对象的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue对象拷贝,解决由于引用赋值修改原对象
在vue项目中,遇到了一个问题,前端需要将后台返回的数据展示在界面上,但是由于多了一个修改功能,点击修改按钮会弹出一个弹框,弹框所有要修改的内容和之前展示的一样,在弹框里修改原来界面的值也会一起变化,这显然不太合适(问题不好描述,直接上代码吧)
<!-- 展示的界面--> <el-form-item label="手机号"> <el-input v-model="form.account"></el-input> </el-form-item> <!-- 修改的弹框--> <el-dialog> <el-form-item label="手机号"> <el-input v-model="form.account"></el-input> <el-input v-model="newForm.account"></el-input> </el-form-item> </el-dialog>
export default { data() { return { form: {}, newForm:{} } }, methods: { request() { //这里是请求的方法,懒得写了,因为返回的数据才是要处理的重点 this.$post('xxx/xxxx',params) .then(res=>{ //将返回的数据直接赋值给form,然后直接在界面上展示 this.form = res; //这时候问题就来了,因为弹框要修改的内容也是同样的数据,如果使用同一个对象this.form, //那么在弹框里修改的是同一个对象 //即使新建一个对象再用返回的数据给它赋值,结果也是相同的,因为对象的赋值是引用赋值 //this.newForm = res; //解决方法其实挺简单,Object.assign解决, this.newForm = Object.assign({}, res) //使用上面这个方法是完全复制了一个新的对象,即使修改这个newForm也不会影响form }) } } }
vue踩坑--赋值后原对象的值改变
//vue定义变量data() { return { //初始表格数组对象 tableData:[], //被赋值对象 newlData:[] //被赋值对象 } }
问题原因
简单的赋值没有创建一个新的对象内存地址,只是把newlData的内存地址指向了tableData的内存地址,一旦tableData的内存地址值发生改变,newlData的数据也会对应改变。
解决办法
方法1、创建一个新的对象,指向新的内存地址,通过JSON解析
let datas = JSON.parse(JSON.stringify(this.tableData));
方法2、es6之展开Object.assign(拷贝obj的内容到一个新的堆内存,copyObj存储新内存的引用)
let datas = Object.assign({},this.tableData);
方法3、es6之展开运算符(仅用于数组)
let copyArr = [...this.tableData];
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue中提示$index is not defined错误的解决方式
这篇文章主要介绍了vue中提示$index is not defined错误的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
最新评论