vue data responsive change

Today, my colleagues asked me to solve a problem. After I pulled the code of the remote warehouse, it ran normally, but he always had problems there. The problem was discovered only after re-pulling. It is related to the data responsive change. Simply put, I assign B to A and then A changes. As a result, B also changed. In general, our solution to this problem is a deep copy. Object.assign ({}, res). Later, I saw it used online

Examples of errors

this.leftColumn = {...this.Columns};
this.rightColumn = {...this.Columns};
1
2
正确示例

this.leftColumn = JSON.parse(JSON.stringify(this.Columns));
this.rightColumn = JSON.parse(JSON.stringify(this.Columns));

The above is not actually used in the project, and this is just a record. The deep copy used in the projects I am responsible for

 

The following is a list of problems in my project for future reference

 

 

 

   There is no problem with the first drop-down selection. If it is done again, the adminForm object is directly assigned in the drop-down data object. So when you change the value later, you will also modify the corresponding value in the corresponding personList object, so

 

The two data will be updated at the same time when it is pulled down. Data design company data will be processed a little bit, haha ​​~~~.

Guess you like

Origin www.cnblogs.com/danhua/p/12673450.html