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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
js调试工具Console命令详解
Oct 21 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
Webpack框架核心概念(知识点整理)
Dec 22 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
基于Vue实现微前端的示例代码
Apr 24 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
php5.2.0内存管理改进
2007/01/22 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
laravel安装和配置教程
2014/10/29 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
Python实例一个类背后发生了什么
2016/02/09 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
2014年公司庆元旦活动方案
2014/03/05 职场文书
初中学校军训方案
2014/05/09 职场文书
会员卡清退活动总结
2014/08/27 职场文书