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对checkbox操作 (循环获取)
May 20 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
javascript实现2048游戏示例
May 04 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
vue 数据双向绑定的实现方法
Mar 04 Vue.js
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
德生PL660的电路分析和打磨
2021/03/02 无线电
一个漂亮的php验证码类(分享)
2013/08/06 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
JQuery选择器特辑 详细小结
2012/05/14 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
javascript基本类型详解
2014/11/28 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
Vue组件开发初探
2017/02/14 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
win7安装python生成随机数代码分享
2013/12/27 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
在Django的视图中使用数据库查询的方法
2015/07/16 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python实现各进制转换的总结大全
2017/06/18 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Python数学形态学实例分析
2019/09/06 Python
python getopt模块使用实例解析
2019/12/18 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
django中related_name的用法说明
2020/05/20 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
初一科学教学反思
2014/01/27 职场文书
喝酒检查书范文
2014/02/23 职场文书
公司办公室岗位职责
2014/03/19 职场文书
国际贸易系求职信
2014/08/09 职场文书
房屋维修申请报告
2015/05/18 职场文书
节约用水广告语60条
2019/11/14 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android
Python图像处理库PIL详细使用说明
2022/04/06 Python