vue项目中做编辑功能传递数据时遇到问题的解决方法


Posted in Javascript onDecember 19, 2016

在项目中完成编辑功能时,遇到了这样一个问题:编辑的功能使用的是一个子组件作为弹出框,如图

vue项目中做编辑功能传递数据时遇到问题的解决方法

这里涉及到从父组件向子组件传递数据的问题,这个项目使用的是v1.0,问题是当点击了编辑以后,弹出的子组件中没有获取到父组件传过来的数据,检查后没有发现代码错误,最后解决的方法就是在父组件中,把传递的数据中的每一项都初始化了一遍就好了

creatIssue (type,list,id){
    this.modelIssue=true;
    this.modeltype=type;
    if(type=='creat'){
     this.listdb.executorName='';
     this.listdb.executorId='';
     this.listdb.state='';
     this.listdb.ProjVerId='';
     this.listdb.content='';
     this.issueTitle="创建问题至";
    }else if(type=='edit'){
     this.listdb={...list};   // 解构数据,只用list的数值,不用list的地址
     this.editId=id;
     this.issueTitle="编辑问题";
    }
   },

这是点击编辑时执行的方法,下面是向子组件传递的数据

listdb:{
  executorName:'',
  executorId:'',
  state:'',
  ProjVerId:'',
  content:''
},

开始的时候,只是定义了一个空的数据像这样:

listdb:{},

这种情况下就不会向子组件传递数据,当把要传递的每一项内容都定义了一遍以后就好了,像上面的那种写法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
符合标准的js表单提交的代码
Sep 13 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 #Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 #Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 #Javascript
Bootstrap的基本应用要点浅析
Dec 19 #Javascript
详解javascript获取url信息的常见方法
Dec 19 #Javascript
js封装tab标签页实例分享
Dec 19 #Javascript
jQuery焦点图轮播效果实现方法
Dec 19 #Javascript
You might like
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
详解PHP中的PDO类
2015/07/06 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
用JS实现的一个include函数
2007/07/21 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
Javascript学习指南
2014/12/01 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
基于Electron实现桌面应用开发代码实例
2020/07/07 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
预防传染病方案
2014/06/14 职场文书
2014年食堂工作总结
2014/11/20 职场文书
上诉答辩状范文
2015/05/22 职场文书
开学第一周总结
2015/07/16 职场文书
交通事故责任认定书
2015/08/06 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python