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 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
键盘KeyCode值列表汇总
Nov 26 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 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框架Phpbean说明
2008/01/10 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
2014/06/15 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Django视图和URL配置详解
2018/01/31 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
PyQt5实现简易计算器
2020/05/30 Python
详解python持久化文件读写
2019/04/06 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
在python3.64中安装pyinstaller库的方法步骤
2020/06/02 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
Python如何操作docker redis过程解析
2020/08/10 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
公司董事长职责
2013/12/12 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
节能减排倡议书
2014/04/15 职场文书
病危通知单
2015/04/17 职场文书
Python3 类型标注支持操作
2021/06/02 Python
Django rest framework如何自定义用户表
2021/06/09 Python