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 浏览器判断实现函数
Aug 20 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
详解angular element()方法使用
Apr 08 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
node.js博客项目开发手记
Mar 16 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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中call_user_func_array的作用
2013/06/07 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
JQuery 学习笔记01 JQuery初接触
2010/05/06 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
深入理解python try异常处理机制
2016/06/01 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
对python的文件内注释 help注释方法
2018/05/23 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python 创建TCP服务器的方法
2020/07/28 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
质检部职责
2013/12/28 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript