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,

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.

Menu