SoFunction
Updated on 2025-04-03

Vue object copying solves the solution to modify the original object due to reference assignment

Vue object copying, solve the problem of modifying the original object due to reference assignment

In the vue project, I encountered a problem. The front-end needs to display the data returned by the background on the interface. However, due to the additional modification function, clicking the modification button will pop up a box. All the contents to be modified in the box are the same as those displayed before. Modifying the original interface value in the pop-up box will also change together. This is obviously not appropriate (the problem is not easy to describe, just add the code)

<!-- Display interface-->
<el-form-item label="Phone number">
 <el-input v-model=""></el-input>
</el-form-item>
<!-- Modified pop-up box-->
<el-dialog>
 <el-form-item label="Phone number">
  <el-input v-model=""></el-input>
  <el-input v-model=""></el-input>
 </el-form-item>
</el-dialog>

export default {
 data() {
  return {
   form: {},
   newForm:{}
  }
 },
 methods: {
  request() { 
   //This is the request method, I am too lazy to write it, because the returned data is the key to processing   this.$post('xxx/xxxx',params)
    .then(res=>{
      // Assign the returned data directly to form, and then display it directly on the interface       = res;
      //The problem arises at this time, because the content to be modified on the pop-up box is also the same data. If the same object is used,      //Then the same object is modified in the pop-up box      //Even if a new object is created and then assigned a value to it with the returned data, the result is the same, because the assignment of the object is a reference assignment      // = res;
      //The solution is actually quite simple, solve it.       = ({}, res)
      //Use the above method to completely copy a new object, even if you modify this newForm, it will not affect the form     })
  }
 }
}

vue step on the pit--the value of the original object changes after assignment

//vue defines the variable data() {   return {　//Initial table array object        tableData:[],　//Assigned object        newlData:[]    //Assigned object   }    
}

Cause of the problem

Simple assignment does not create a new object memory address, but points the memory address of newData to the memory address of tableData. Once the memory address value of tableData changes, the data of newData will also change accordingly.

Solution

Method 1. Create a new object, point to a new memory address, and parse it through JSON.

let datas = (());

Method 2, es6 expansion (copy the content of obj to a new heap memory, copyObj stores references to the new memory)

let datas = ({},);

Method 3, es6's expansion operator (only used in arrays)

let copyArr = [...];

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.