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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
jquery实现网页定位导航
Aug 23 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
node通过npm写一个cli命令行工具
Oct 12 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 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函数file_get_contents超时处理的方法详解
2013/06/03 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
用PHP代码给图片加水印
2015/07/01 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
js 上传图片预览问题
2010/12/06 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
python机器学习库常用汇总
2017/11/15 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
汇智创新科技发展有限公司
2015/12/06 面试题
如何进行Linux分区优化
2016/09/13 面试题
司仪主持词两篇
2014/03/22 职场文书
还款承诺书范文
2014/05/20 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
学生犯错保证书
2015/05/09 职场文书
党小组意见范文
2015/06/08 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书