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简化JavaScript开发分析
Feb 19 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 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将时间差转换为字符串提示
2011/09/07 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
php pdo操作数据库示例
2017/03/10 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
python实现canny边缘检测
2020/09/14 Python
Python调用JavaScript代码的方法
2020/10/27 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
田径运动会开幕式及主持词
2014/03/28 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
个人收入证明模板
2014/09/18 职场文书
二年级学生期末评语
2014/12/26 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
四年级数学教学反思
2016/02/16 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL
本地搭建minio文件服务器(使用bat脚本启动)的方法
2022/07/15 Servers
spring 项目实现限流方法示例
2022/07/15 Java/Android