VUE中让由全局变量添加生成的新数组不随全局变量的变化而变化

问题场景:

const addOptions = {
    singleOrComplex,
    totalNum: this.smallTotalPrice,
    selectList: this.purchaseLotter,
    smallTotalPrice: this.smallTotalPrice * 2
}
this.selectSucLotter.push(addOptions)

addOptions中的红框内容为全局的变量,我们需要往this.selectSucLotter中添加addOptions,且需要this.selectSucLotter中的值不随着addOptions中红框内的变量改变而改变。如果我们直接写this.selectSucLotter.push(addOptions),此时当我们修改红框中的内容时,this.selectSucLotter的值也会随之发生改变。解决之前大家先来看一下Vue实现对数组、对象的深拷贝、复制

当组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝),如下

数组:
var a = [1,2,3];
var b = a;
b.push(4); // b中添加了一个4
alert(a); // a变成了[1,2,3,4]
对象:
var obj = {a:10};
var obj2 = obj;
obj2.a = 20; // obj2.a改变了,
alert(obj.a); // 20,obj的a跟着改变

  这就是由于对象类型直接赋值,只是将引用指向同一个地址,导致修改了obj会导致obj2也被修改

  所以在vue中,如果多个组件引用了同一个对象作为数据,那么当其中一个组件改动对象数据时,其他对象的数据也会同步改动。

解决方法:

let addOptions = {
    singleOrComplex,
    totalNum: this.smallTotalPrice,
    selectList: this.purchaseLotter,
    smallTotalPrice: this.smallTotalPrice * 2
}
addOptions = JSON.parse(JSON.stringify(addOptions))
this.selectSucLotter.push(addOptions)

  

原文地址:https://www.cnblogs.com/gxsyj/p/9767956.html

时间: 2024-11-09 10:34:43

VUE中让由全局变量添加生成的新数组不随全局变量的变化而变化的相关文章

将列表中的字符以‘*’连接生成一个新的字符串

#输出下面的字符 """  1  2*3 4*5*6 7*8*9*10 11*12*13*14*15 16*17*18*19*20*21 """ x=1 n=int(raw_input('please input row number:')) for i in range(0,n): x=x+i y=x+i #将列表中的每一个元素转换成字符 m=map(str,range(x,y+1)) #将列表中的字符以‘*’连接生成一个新的字符串 print

task 2:移出数组arr中与2相等的元素,并生成一个新数组,不改变原数组。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>移出数组arr中与2相等的元素,并生成一个新数组,不改变原数组.</title> </head> <body> <script> var arr = [1,2,3,4,2,5,6,2,7,2]; var str4 = arr.slice(1,2); var st

从一个数组中随机取出一定数量元素组成新数组

/** * 从一个数组中随机取出一定数量元素组成新数组 * @param array 一个String类型的数组 * @param number需要取出元素的数量 * @return 一个随机的数组 * @throws NullPointerException原数组不能为空 *@throws ArrayIndexOutOfBoundsException新数组长度应不大于原数组的长度 */ public static String[]  getRandomArray(String[] array,

在vue中利用vue-qr插件动态生成二维码并嵌入LOGO

收到需求要生成二维码的时候刚进项目组不久,接触vue也才一两个星期,还处于懵逼状态. 本小白的第一反应就是百度二维码的生成方法,网上有很多大神给出解决方案,最开始本小白以为是在后台生成图片然后传到前台页面,后来发现可以直接在前端用js生成,网上查到的大部分都是用jquery.qrcode.js配合utf.js(为了支持中文)和jquery-1.8.0.js来实现,亲测可行(但本白只在原生HTML中实现,vue中死活报错:"找不到qrcode方法",是不是本小白没找准姿势,哪位大神求告知

vue中,svg图标添加click事件,部分浏览器不生效

vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @click="addSubject(scope.$index)"> </icon> 后来发现,在edge内核中只有点击svg边缘部分才会触发click事件 所以解决办法如下:为svg图标外面包裹一层元素,click事件绑定在外侧元素上 <a href='javascri

用js将字符串中的元音字母删除并返回新数组

1.首先你想将字符串转换成数据然后循环遍历的话很麻烦,因为你需要数组和字符串转换来转换去 将数组转换成字符串用var a = [1,2,3,4,5,6]:a.join('')---得到的是"123456"若是a.join()则获取的是"1,2,3,4,5,6" 将字符串转换成数组用var b='abcdefg':b.split('')---得到的是["a","b","c","d",&qu

java题求代码,4、现在有如下的一个数组: int oldArr[]={1,3,4,5,0,0,6,6,0,5,4,7,6,7,0,5} 要求将以上数组中值为0的项去掉,将不为0的值存入一个新的数组,生成的新数组为: int newArr[]={1,3,4,5,6,6,5,4,7,6,7,5}

public class TEST { public static void main(String[] args) { int [] oldArr= {1,3,4,5,0,0,6,6,0,5,4,7,6,7,0,5}; int [] newArr= new int[oldArr.length] ; int n=0; for (int i=0;i<oldArr.length;i++) { if(oldArr[i]==0) {} else { newArr[n]=oldArr[i]; n++; }

vue中动态添加div

知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: 核心代码说明(样式代码可自行修改,详细代码请参照源码): <div v-for="(v,i) in list"> <div class="form-group m-form__group row" style="padding-top: 1

vue中添加less配置,用于计算div高度

需求:左边垂直的菜单栏高度设置为 100% - 导航栏的高度(3.6rem) 首先,从vue-cli脚手架里的安装的webpack模板中并没有less的依赖配置,得自己手动添加安装 安装命令::npm install less less-loader --save 安装完后packahe.json中出现如图添加的配置: 然后可以在 .vue 的文件中书写less代码了, 结果: