美文网首页vue
vue使用push添加多条相同数据,改变其中一条数据导致其他的数

vue使用push添加多条相同数据,改变其中一条数据导致其他的数

作者: 扶得一人醉如苏沐晨 | 来源:发表于2023-02-17 11:10 被阅读0次

在写vue后台项目时,使用push向数组中添加多条相同的数据,修改其中一条数据,其他的数据随之改变。

出现这个问题的原因是,push的并不是一个值,而是一个地址,数组都指向同一个地址,就好比data.itemList[0]和 data.itemList[1]都是指向item的。每一次push就等于改变了数组的地址,所以会导致每个元素都变成了最后push的内容 。

当使用push添加多条数据时,多条数据指向的是同一个内存地址,修改其中一条数据相当于修改了所指内存的值,所以每条数据都改变了。

        let obj = {
            category:item.category,
            materialSn:item.materialSn,
            remark:item.remark
        }
        for(let i=0;i<count;i++){
            this.form.itemList.push(obj);    //原代码
        }

当修改其中一条数据时,其他数据随之改变;

解决:每次将要push的数据都存在另外单独开辟的空间中。这样就不会导致,整个数组都是指向一个内存地址。

方法一:每次push之前开辟一个新的内存地址

    for(let i=0;i<count;i++){
        //开辟一个新的内存地址
        let obj = {
            category:item.category,
            materialSn:item.materialSn,
            remark:item.remark
        }
        this.form.itemList.push(obj);    //原代码
    }

方法二:每次push之前对对象进行深拷贝

       let obj = {
            category:item.category,
            materialSn:item.materialSn,
            remark:item.remark
        }
        for(let i=0;i<count;i++){
            this.form.itemList.push(deepClone(obj));    //原代码
        }

最后附上deepClone方法的代码

/**
 * 对象深拷贝
 */
export const deepClone = (data) => {
  // 封装的判断数据类型的方法
  var type = getObjType(data);
  var obj;
  if (type === "array") {
    obj = [];
  } else if (type === "object") {
    obj = {};
  } else {
    // 不再具有下一层次
    return data;
  }
  if (type === "array") {
    for (var i = 0, len = data.length; i < len; i++) {
      obj.push(deepClone(data[i]));
    }
  } else if (type === "object") {
    for (var key in data) {
      obj[key] = deepClone(data[key]);
    }
  }
  return obj;
};

相关文章

  • vue的购物车原理

    vue在使用购物车这块,在购物车里面有了信息后,添加相同的信息只在数量上+1而不是再次往数组里面push数据,方法...

  • Vue:富文本编辑器quill-editor上传图片导致url太

    发现问题: 用Vue插件quill-editor添加图片的时候默认会被转为base64编码导致数据很长,因此上传数...

  • python写入json文件

    想要多条相同key的数据添加json中,先将数据存入到字典中,再append到列表中。最后存入json中。 这样子...

  • Vue的使用

    使用vue请求数据,首先添加文件引用: 请求单条数据 控制器请求方法:

  • vue + swiper加载问题

    在vue组件中使用swiper,而swiper中的数据是ajax获取的,会导致轮播没有效果。这是因为ajax获取数...

  • vue中this.$set()的作用

    在使用VUE中遇到要求实时更新视图数据,当发现model上的数据发生改变,而页面上的视图数据没有改变,推荐使用th...

  • CoreData从入门到精通二(增删改查)

    增:新添加一条数据,首先需要创建被添加的数据,使用 NSEntityDesctiption 类的 + (__kin...

  • Vue 修改数据问题

    Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测: push() pop() s...

  • 记录一个Vue中改变循环遍历后的数据的坑

    问题背景 使用v-for遍历对象渲染数据,被渲染的数据改变时另一数据需要联动改变场景图 Vue中对数组和对象的改变...

  • JVM 运行时数据区(Run-Time Data Areas)

    JVM 定义了在执行程序期间使用的各种运行时数据区。其中一些数据区的生命周期与JVM 相同 ,其他数据区域是每个线...

网友评论

    本文标题:vue使用push添加多条相同数据,改变其中一条数据导致其他的数

    本文链接:https://www.haomeiwen.com/subject/mubmkdtx.html