Vue js deleted the elements of one array, and the other array was deleted by Synchronize.

there are two arrays, array An on the left is written dead, I put the data of array An on the left into array B on the right after logical processing, the data structure of array An and B are the same, the name of the array is different, when I operate array B, such as B.splice (index, 1), the element of the current index position of array An is also deleted, how to avoid this problem?

The

code is as follows:
json format
leftMenu: 

         [{
                lv: 1,
                collspan: true ,
                menuId: "1-1",
                menuText: "-",
                //  iconClass:"../static/nav/toTop.png"
                subMenu: [
                    {
                        menuText: "",
                        menuId: "1-1-1",
                        lv: 2,
                        url:"",
                        // iconClass:"../static/nav/toTop.png"
                    },
                      {
                        menuText: "",
                        menuId: "1-1-2",
                        lv: 2,
                        url:""
                    },
                      {
                        menuText: "",
                        menuId: "1-1-3",
                        lv: 2,
                        url:""
                    },
                      {
                        menuText: "",
                        menuId: "1-1-4",
                        lv: 2,
                        url:""
                    }
                ]
      }]

this.editMenuData.push (leftMenu)
editMenuData array is empty, logical processing, need to add leftMenu objects to editMenuData array, editMenuData data structure is consistent with leftMenu data structure,

Javascript
Jan.21,2022

B = JSON.parse (JSON.stringify (B))

it is estimated that B is also caused by using the reference of A, so posting the code can determine the reason more accurately.
A simple example is as follows: 

let arrA = arrB = []; // js
arrB.push(1); // arrBarrAarrAarrB
arrB // [1]
arrA // [1]

to solve the problem caused by the same reference, you only need to make the two variables not pointers to the same object. If you don't need deep cloning, you can do this: 

let arrA = []; 
let arrB = arrA.concat();
arrB.push(1);
arrB // [1]
arrA // []

or use the cloneDeep method of Lodash directly to make a deep clone.

use JSON.parse when copying arrays (JSON.stringify ()) make a deep copy, for example: arrB = JSON.parse (JSON.stringify (arrA))

array or object copy) this problem will not occur.

Previous: What is the relationship between Excel column width and pixels?

Next: How can for not output itself in vuejs?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb3c8b-2483.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb3c8b-2483.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?