问题场景:

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. IOS 伪类:active失效

    IOS中不兼容:active伪类,所以在状态控制上就会有问题,解决办法是,添加一个空的点击事件: 移动端添加:ontouchstart <a class="m-btn" on ...

  2. JSTreeShaking的webpack-deep-scope-plugin插件的应用

    webpack自身实现词法分析的JSTreeShaking webpack-depp-scope-plugin插件实现作用域分析的JSTreeShaking 一.webpack词法分析的JSTreeS ...

  3. day8 socket

    代码: 例子1:socket tcp 通讯 server端 import socketserver = socket.socket()ip_port = ("127.0.0.1", ...

  4. golang编写二叉树

    最近开始找golang 开发工程师职位,针对算法相关二叉树相关常用面试题搞一遍: package tree import (     "math"     "fmt&qu ...

  5. jsp引入文件时候经常遇到的${ctx}

    jsp引入文件时候经常遇到的${ctx} 在jsp页面中经常见到这样的代码: <script type="text/JavaScript" src="${ctx}/ ...

  6. R安装包的问题

    package 'tswge' is not available (for R version 3.5.1) install.packages('tswge', repos="http:// ...

  7. 记录--js中出现的数组排序问题

    这是今天在写vue项目时发生的一个小问题,在此记录一下,方便自己的回顾.项目是前后端分离的,前台主要使用了vue-cli3.0 + mintui,是一个移动端的web app包括了后台发布管理的一些功 ...

  8. remote mounting from windows to linux

    8 Ways To Mount SMBfs (SAMBA FILE SYSTEM) In Linux. Sep 8, 2009 How to Mount smbfs (SAMBA file syste ...

  9. 十,StatefulSet简介及简单使用

    目录 StatefulSet简介 为什么要用statefulset控制器 简单测试 使用 StatefulSet 创建基础的PV StatefulSet 清单 statefulset管理pod的启停顺 ...

  10. task_struct源码解读

    task_struct英文源码原文 以下是中文以及解释:(未完待续,慢慢敲) 1. /* Used in tsk->state: */ #define TASK_RUNNING 0x0000// ...