zoukankan      html  css  js  c++  java
  • js数组赋值,改变其中一个,另一个数组也会改变(vue中数据绑定)

    1,问题背景和原因

    在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数据赋值

     

     

    心有所想,必有回响
  • 相关阅读:
    js入门
    小程序事件处理
    Vue组件传递数据
    Vue+webpack
    vue总结
    Vue指令
    最优化练习题
    最优化学习笔记
    概率与统计分析练习题
    概率与统计分析学习笔记
  • 原文地址:https://www.cnblogs.com/zhulei2/p/13613059.html
Copyright © 2011-2022 走看看