vue js 在组件中对数组使用splice() 遇到的坑。。。
遇到的问题:
用el-dialog写了个子组件
要实现在子组件中增删数据 点击确定后把值返回给父组件
父组件在每次点开子组件时都会把自己的值传进去。
//父组件传值
this.$refs.transfer.open(this.checkedColumn.concat(), this.columns.concat(), 'fbCampaign');
//子组件接受值
open(checkedColumn, columns, type) {
this.dialogVisible = true;
this.showColumns = checkedColumn;
this.otherColumns = columns;
this.type = type
}
逻辑并没有错误。。。但会遇到下面问题。。
涉及删除的操作,点保存没有出现问题,点击取消,父组件被删除的数据就会不见。
但是并没有传值给父组件。
原因:
数组是引用类型,splice()会删除所引用的地址里面的值。(吐血。。。)
以前在Java中遇到的问题,没想到js也会有这种删除问题。。
解决办法
在父组件传值的时候不传原地址的参数,通过concat()函数复制一个新的值,再传过去。
this.$refs.transfer.open(this.checkedColumn.concat(), this.columns.concat(), 'fbCampaign');
vue js 在组件中对数组使用splice() 遇到的坑。。。的更多相关文章
- Vue.js之组件传值
Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...
- Vue.js多重组件嵌套
Vue.js多重组件嵌套 Vue.js中提供了非常棒的组件化思想,组件提高了代码的复用性.今天我们来实现一个形如 <app> <app-header></app-head ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- 坑!vue.js在ios9中失效
坑!vue.js在ios9中失效! 接到实现,在移动端生成一个分享链接,分享到微信,在微信中打开,加入! 好,用vue实现----------------------->写代码--------- ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- Vue.js使用-组件(下篇)
上一节,我们定义了组件的基本使用,下面我们看看组件其他的一些特性. 1.组件作用域 同时在Vue对象和组件中定义一个属性,显示结果是怎样的呢? <!DOCTYPE html> <ht ...
- Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
- 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题
基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...
- vue.js 同级组件之间的值传递方法(uni-app通用)
vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149
随机推荐
- Django基础之urls
一 Django简介 二 视图层之应用系统 一 Django简介 Django: urls:路径与视图函数的映射关系 views:逻辑处理 models:与数据库相关的操作 t ...
- js封装Cookie操作 js 获取cookie js 设置cookie js 删除cookie
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code var CookieUtil = { // 设置cookie set : functi ...
- rman restore spfile from backup
spfile一般在$ORACLE_HOME/dbs(linux)目录,如果你丢失了spfile并不会引起实例立刻停掉,你的实例可以继续操作,尽管当你restore spfile的时候需要关闭重启实例, ...
- Mysql主从同步(复制)(转)
文章转自:https://www.cnblogs.com/kylinlin/p/5258719.html 目录: mysql主从同步定义 主从同步机制 配置主从同步 配置主服务器 配置从服务器 使用主 ...
- css3 实现图片等比例放大与缩小
css3 实现图片等比例放大与缩小 在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...
- Intel CPU 漏洞分析
Intel CPU漏洞分析报告 预备知识 存储分级 由于计算机存储分级的特性(第一级:寄存器,第二级:高速缓存,第三级:内存,第四级:磁盘),每一级之间的访问速度差距高达数量级.所以处理器会将用到的数 ...
- jconsole使用
先看一张图 根据JConsole和任务管理器对比,堆内存大小在250M左右,差不多空跑一个程序用idea启动springboot就是这个大小 项目启动初始类在一万个左右,活动线程50个上下,cpu利用 ...
- Android学习之基础知识五—RecyclerView(滚动控件)
RecyclerView可以说是增强版的ListView,不仅具有ListVIew的效果,还弥补许多ListView的不足. 一.RecyclerView的基本用法 与百分比布局类似,Recycler ...
- java 入门常识
1.java应用程序的运行机制 Java首先利用文本编辑器编写 Java源程序,源文件的后缀名为.java:再利用编译器(javac)将源程序编译成字节码文件,字节码文件的后缀名为.class: 最后 ...
- 使用Quartz实现定时任务
一:Quertz的用途 Quertz是一个开源的作业任务调度框架,他可以完成像JavaScript定时器类式的功能,其实Java中Timer也可实现部分功能,但相比Quertz还是略逊一筹,本人这次需 ...