vue对象拷贝，解决由于引用赋值修改原对象的方法

最新推荐文章于 2025-05-24 01:10:42 发布

原创最新推荐文章于 2025-05-24 01:10:42 发布 · 1.3w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue问题及解决方法专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在Vue项目中，如何避免修改弹窗数据时影响原始数据显示的问题。通过使用Object.assign方法深拷贝数据，确保了弹窗修改操作不会同步反映到界面上，有效分离了展示与编辑状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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