js数组赋值,改变其中一个,另一个数组也会改变,vue中数据绑定

在vue中,我在data定义了变量,接后台数据,数组中存的是对象,具体数据类型如下:

data () {
    return {
      selectAssetList: {
        applyTemplateDetailList: []
      },
      applyTemplate: {
        templateName: '',
        status: 'in_use',
        applyTemplateDetailList: []
      }
    }
  }

之后我对两个数组分别赋值,如下:

this.selectAssetList.applyTemplateDetailList = resp.data
this.applyTemplate.applyTemplateDetailList = resp.data

当其中一个数组对象的某一个属性改变时,另一个也会改变

我们都知道,数组所指向的是内存地址,直接赋值会使它们指向同一地址。(深拷贝和浅拷贝)

2,一般解决办法

this.selectAssetList.applyTemplateDetailList = [...resp.data]
this.applyTemplate.applyTemplateDetailList = [...resp.data]

显然这种办法是不能解决我的问题,原因是当这个数组没有嵌套对象和其他数据时,这种方法是可以的

(形如:applyTemplateDetailList: [] 赋值:this.applyTemplateDetailList = [...resp.data])

3,最终解决办法

this.selectAssetList.applyTemplateDetailList = JSON.parse(JSON.stringify(resp.data))
this.applyTemplate.applyTemplateDetailList = JSON.parse(JSON.stringify(resp.data))

把要赋值的数据转成json字符串,然后再转成json数据赋值