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 相关文章推荐
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
Node.js插件安装图文教程
May 06 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
vant实现购物车功能
Jun 29 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
php 网上商城促销设计实例代码
2012/02/17 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
js运动动画的八个知识点
2015/03/12 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
axios基本入门用法教程
2017/03/25 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python开发中range()函数用法实例分析
2015/11/12 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
Python交互式图形编程的实现
2019/07/25 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
python如何提升爬虫效率
2020/09/27 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
校运会通讯稿
2015/07/18 职场文书
文书工作总结(范文)
2019/07/11 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
分享提高 Python 代码的可读性的技巧
2022/03/03 Python