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 相关文章推荐
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 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 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
jquery中实现简单的tabs插件功能的代码
2011/03/02 Javascript
sails框架的学习指南
2014/12/22 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
基于python 处理中文路径的终极解决方法
2018/04/12 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
Python流程控制 while循环实现解析
2019/09/02 Python
python滑块验证码的破解实现
2019/11/10 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
如何设置Java的运行环境
2013/04/05 面试题
日化店促销方案
2014/03/26 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
自我推荐信范文
2014/05/09 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers