问题场景:

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)

  

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

  1. 在Vue中由后台数据循环生成多选框CheckBox时的注意事项

    多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...

  2. js中 给json对象添加属性和json数组添加元素

    js中 给json对象添加新的属性 比如现在有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre.做法如下: var obj={ &quo ...

  3. vue中v-bind:class动态添加class

    1.html代码 <template v-for='item in names'> <div id="app" class="selectItem&qu ...

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

    vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...

  5. Vue中通过v-for动态添加图片地址

    由于组件化问题,webpake在打包以后,src目录下的assets里面存放的img图片,路径已经更换.很多入坑的前端程序员在使用的时候,可能专破头也弄不清地址是什么个情况: 这里在使用vue-cli ...

  6. js获取json对象中的key和value,并组成新数组

    //比如有一个json var json = {"name" : "Tom", "age" : 18}; //想分别获取它的key 和 va ...

  7. 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 ...

  8. Vue 中动态添加class(使用v-bind:class)

    今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...

  9. vue中需要注意的问题总结(上)

    React 与其说是一种框架,倒不如说是一种开发范式.它的核心理念非常简单: 界面/视图就是数据结构的可视化表达UI = f(data) 而界面/视图由组件组合而来UI = f1(data) + f2 ...

随机推荐

  1. 转:GitHub团队项目合作流程

    转自:https://www.cnblogs.com/schaepher/p/4933873.html GitHub团队项目合作流程   已在另一篇博客中写出关于以下问题的解决,点此进入: 同步团队项 ...

  2. [转] - Linux中使用alternatives切换Jdk版本

    1. 准备JDK包,分别是1.7和1.8,jdk-7u79-linux-x64.tar.gz和jdk-8u161-linux-x64.gz: 2. 解压,解压后的目录结构如图所示: JDK1.7: J ...

  3. Perl环境安装

    在我们开始学习 Perl 语言前,我们需要先安装 Perl 的执行环境. Perl 可以在以下平台下运行: Unix (Solaris, Linux, FreeBSD, AIX, HP/UX, Sun ...

  4. QTP(11)

    练习:录制Flight登录-打开1-10之间随机编号的订单-退出,打开完订单后,退出前,使用msgbox输出“顾客x预定了y从z到w的c类型的k张票!”说明:x是顾客姓名.y是日期.z是FlyFrom ...

  5. java 多线程,线程安全等定义

    线程安全, synchronized的使用,保证方法或代码块操作的原子性.可见性和有序性 参考这篇文章: 7张图带你轻松理解Java 线程安全 public class ThreadDemo { pr ...

  6. java8学习之方法引用详解及默认方法分析

    方法引用: 之前花了很多时间对Lambda表达式进行了深入的学习,接下来开启新的主题---方法引用(Method References),其实在之前的学习中已经使用过了,如: 那方法引用跟Lambda ...

  7. BZOJ4353 Play with tree[树剖]

    复习几乎考不到的树剖.维护min以及min个数,打set和add标记即可,注意set优先级优于add. #include<iostream> #include<cstdio> ...

  8. VUE-文本-事件-属性指令

    一.Vue文本指令 文本指令: 1.{{ }} 2.v-text:不能解析html语法的文本,会原样输出 3.v-html:能解析html语法的文本 4.v-once:处理的标签的内容只能被解析一次 ...

  9. es6 模块编译 *** is not function

    今天学习vuejs,里面用到了es6的写法,遇到了一个很怪的问题,不知道有人遇到么. 安装的模块引用:import Vue from 'vue';(注意,Vue处没有{},如果加上这个就报错Uncau ...

  10. vue插件开发的两种方法:以通知插件toastr为例

    方法一: 1.写插件: 在 src 文件夹下面建 lib 文件夹用于存放插件,lib 文件夹下再建toastr文件夹,在toastr文件夹下新建 toastr.js 和 toastr.vue两个文件. ...