Array is not cloned, wrapped inside Proxy-CodePudding

Im executing this code inside vue created() method:

        const width = window.innerWidth;
        const columns = this.columns.slice()
        let colVis = columns.map((element) => {
                if(element.sClass == 'min-tv' && width < 2500) {
                    element.visible = false;
                    return element;
                } else if(element.sClass == 'min-desktop-lg' && width < 1980) {
                    element.visible = false;
                    return element;
                } else {
                    return element;
                }
            });
        console.log(columns);
        console.log(colVis);

For some reason both arrays returns same values (and this.columns too). Everything is wraped inside Proxy - arrays and their values.

I cant understand whats going on and why i can't have clone of array?

I don't use computed, because it's initialization values (for Datatables colvis).

CodePudding user response：

You should use filter to filter data from an array.

           const width = window.innerWidth;
          const columns = this.columns.slice()
          let colVis = columns.map((element) => {
                  if(element.sClass == 'min-tv' && width < 2500) {
                    element.visible = false;
                    return element;
                  } else if(element.sClass == 'min-desktop-lg' && width < 1980) {
                    element.visible = false;
                    return element;
                } else {
                    return element;
                }
            }).filter((element) => element.visible);
        console.log(columns);
        console.log(colVis);

CodePudding user response：

It turns out to be vue bug. Using inline window.innerWidth breaks its normal behavior.