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)
VUE中让由全局变量添加生成的新数组不随全局变量的变化而变化的更多相关文章
- 在Vue中由后台数据循环生成多选框CheckBox时的注意事项
多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...
- js中 给json对象添加属性和json数组添加元素
js中 给json对象添加新的属性 比如现在有一个json对象为jsonObj,需要给这个对象添加新的属性newParam,同时给newParam赋值为pre.做法如下: var obj={ &quo ...
- vue中v-bind:class动态添加class
1.html代码 <template v-for='item in names'> <div id="app" class="selectItem&qu ...
- vue中,svg图标添加click事件,部分浏览器不生效
vue项目中,使用svg图标,但是发现,为svg图标绑定click事件时,部分浏览器会出现,点击没有反应的情况,代码如下: <icon name="icon_add" @cl ...
- Vue中通过v-for动态添加图片地址
由于组件化问题,webpake在打包以后,src目录下的assets里面存放的img图片,路径已经更换.很多入坑的前端程序员在使用的时候,可能专破头也弄不清地址是什么个情况: 这里在使用vue-cli ...
- js获取json对象中的key和value,并组成新数组
//比如有一个json var json = {"name" : "Tom", "age" : 18}; //想分别获取它的key 和 va ...
- 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 ...
- Vue 中动态添加class(使用v-bind:class)
今天在Vue中动态修改类名,元素的样式就是不改变,类名也没有加上去,里面的问题具体我还是不太清楚,有可能是因为自己不认真,把 :class= 后面的内容的格式给整错了,下面将正确的做法记录一下,便于以 ...
- vue中需要注意的问题总结(上)
React 与其说是一种框架,倒不如说是一种开发范式.它的核心理念非常简单: 界面/视图就是数据结构的可视化表达UI = f(data) 而界面/视图由组件组合而来UI = f1(data) + f2 ...
随机推荐
- PHP敏感词替换
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- php操作 cookie
1,设置cookie <?php setcookie('key'); setcookie('key1','value1'); setcookie(***); setcookie('key4', ...
- [LeetCode]1089. Duplicate Zeros
Given a fixed length array arr of integers, duplicate each occurrence of zero, shifting the remainin ...
- TCP保活定时器
TCP有Keepalive功能,它和HTTP的Keepalive功能目的不一样.TCP服务器希望知道客户端是否崩溃.重新启动或者中间路由不通.保活定时器就提供这种功能. 在进一步介绍TCP的保活定时器 ...
- Phoenix设置联合主键
1例如 create table test12(email varchar not null,id integer not null,name varchar not null,age integer ...
- Windows Server 2016分层式存储,使用PowerShell修改底层介质类型
新部署的备份服务器,需要做分层式存储,按照网上最常见一个作者叫刘兵的文档,名叫<Windows Server2016分层存储技术详细拆解手册>,做到使用PowerShell修改磁盘的Med ...
- python常用模块:模块练习
今日作业: 1.简述 什么是模块 模块就将一些函数功能封装在一个文件内,以‘文件名.py’命名,以“import 文件名”方式调用 模块有哪些来源 自定义.内置.DLL编译器.包模块的格式要求有哪些 ...
- PAT Basic 1051 复数乘法 (15 分)
复数可以写成 ( 的常规形式,其中 A 是实部,B 是虚部,i 是虚数单位,满足 1:也可以写成极坐标下的指数形式 (,其中 R 是复数模,P 是辐角,i 是虚数单位,其等价于三角形式 (. 现给定两 ...
- 微信获取用户列表的json字符串解析
今天学习微信遇到一个json的解析,但是因为自己的模型思维和思考能力很差一直困扰最后经过询问解决的问题,其实问题很简单总结起来就是json的解析: 注释:今天主要是讲怎样解析json的所以其他方法就只 ...
- cmd_memo
1. bind host or ip:port #指定域名 curl -H 'Host:www.tsuiz.com' http://10.14.54.131:8080/check.do #指定ip和端 ...