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 相关文章推荐
JQuery select标签操作代码段
May 16 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
JavaScript中this详解
Sep 01 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
Vue自定义事件(详解)
2017/08/19 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
Nodejs 识别图片类型的方法
2019/08/15 NodeJs
jquery实现的分页显示功能示例
2019/08/23 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
python字符串连接的N种方式总结
2014/09/17 Python
介绍Python中的__future__模块
2015/04/27 Python
Python中List.count()方法的使用教程
2015/05/20 Python
python编程线性回归代码示例
2017/12/07 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
高中自我鉴定范文
2013/11/03 职场文书
员工晚婚的请假条
2014/02/08 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
2016高考寄语集锦
2015/12/04 职场文书
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL