前端数组赋值问题

最新推荐文章于 2024-11-20 15:51:21 发布

不过一念间

最新推荐文章于 2024-11-20 15:51:21 发布

阅读量843

点赞数

分类专栏：踩过的坑文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_43664448/article/details/123291344

版权

踩过的坑专栏收录该内容

22 篇文章

订阅专栏

在这里插入图片描述
这是表单里的内容，可以删除。

第一次点击新增，进入表单，删除了；第二次点击新增，进入表单，要默认还是有这些信息。

为此，我在表单 init() 方法中，先将原对象数据设置为 null, 再将备份对象数据赋值，但是发现，备份对象数据也会同步删除
代码见下：

// 原数组
portList: [
        { title: '渔港设施维护', status: '1', sit: '' },
        { title: '渔船有序停泊', status: '1', sit: '' },
        { title: '配备消防船', status: '1', sit: '' },
        { title: '渔港消防设施', status: '1', sit: '' },
        { title: '渔港照明、监控设施', status: '1', sit: '' },
        { title: '渔港防台风物资储备', status: '1', sit: '' },
        { title: '渔船靠泊不占用航道', status: '1', sit: '' },
        { title: '禁止渔船非法载客', status: '1', sit: '' },
        { title: '不在渔港内捕捞、养殖', status: '1', sit: '' },
        { title: '渔港清洁、垃圾收集', status: '1', sit: '' },
        { title: '明火作业情况', status: '1', sit: '' },
        { title: '危险货物装卸情况', status: '1', sit: '' }
      ],
// 备份数组
pList: [
        { title: '渔港设施维护', status: '1', sit: '' },
        { title: '渔船有序停泊', status: '1', sit: '' },
        { title: '配备消防船', status: '1', sit: '' },
        { title: '渔港消防设施', status: '1', sit: '' },
        { title: '渔港照明、监控设施', status: '1', sit: '' },
        { title: '渔港防台风物资储备', status: '1', sit: '' },
        { title: '渔船靠泊不占用航道', status: '1', sit: '' },
        { title: '禁止渔船非法载客', status: '1', sit: '' },
        { title: '不在渔港内捕捞、养殖', status: '1', sit: '' },
        { title: '渔港清洁、垃圾收集', status: '1', sit: '' },
        { title: '明火作业情况', status: '1', sit: '' },
        { title: '危险货物装卸情况', status: '1', sit: '' }
      ],

init()方法中：
	this.portList = []
    this.portList = this.pList

上面对象数组赋值的写法造成前面的bug，需要先将备份数组转为字符串，再转为对象数组，赋值给原对象数组即可。
写法如下：

this.portList = []
this.portList = JSON.parse(JSON.stringify(this.pList))