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仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
RequireJS使用注意细节
May 15 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 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
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
python 多线程串行和并行的实例
2019/02/22 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
Python sep参数使用方法详解
2020/02/12 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
Python API len函数操作过程解析
2020/03/05 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
python 装饰器的使用示例
2020/10/10 Python
python学习之使用Matplotlib画实时的动态折线图的示例代码
2021/02/25 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
求职意向书
2014/04/01 职场文书
房屋转让协议书
2014/04/11 职场文书
装修协议书范本
2014/04/21 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
2014年保洁工作总结
2014/11/24 职场文书
mysql 索引合并的使用
2021/08/30 MySQL
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers