vue项目中做编辑功能传递数据时遇到问题的解决方法_javascript技巧

在项目中完成编辑功能时,遇到了这样一个问题:编辑的功能使用的是一个子组件作为弹出框,如图

这里涉及到从父组件向子组件传递数据的问题,这个项目使用的是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:{},

这种情况下就不会向子组件传递数据,当把要传递的每一项内容都定义了一遍以后就好了,像上面的那种写法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索vue传递数据
javascript vue、mongovue javascript、vue router 参数传递、vue resource传递参数、vue router 传递数据,以便于您获取更多的相关知识。

时间: 2024-12-31 02:13:59

vue项目中做编辑功能传递数据时遇到问题的解决方法_javascript技巧的相关文章

JavaScript中的单引号和双引号报错的解决方法_javascript技巧

在使用JavaScript显示消息或者传递字符数据的时候,经常会碰到数据中夹杂单引号(')或者双引号("),这种语句往往会造成JavaScript报错.对此一般采用/'或者/"的解决. 例如: Alert("this is test "message"!"); Alert('this is test 'message'!'); 一般会改成以下语句 Alert("this is test /"message/"!&qu

动态创建script在IE中缓存js文件时导致编码的解决方法_javascript技巧

先看下重现代码 1, gb2312.html 该文件编码为gb2312 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title></title> <meta charset="gb2312"/> <style> p { color: red; } </style> </head> <body> <button onclic

IE中JS跳转丢失referrer问题的2个解决方法_javascript技巧

曾整理过一个各种页面跳转方法中referrer丢失的情况,其中提到,在IE中,使用类似 location.href = "a.html"这样的方式跳转页面时,在目标页面中 document.referrer的值会是空.这应该是IE的一个 bug. 大多数情况下,这个问题不会给我们带来麻烦,但有时候我们不得不用JavaScript来跳转,同时又要在下一个页面收集 document.refer,这时就得想想其他办法了. Form GET方法 首先想到的是使用Form表单,用JS发起一个GE

javascript中IE浏览器不支持NEW DATE()带参数的解决方法_javascript技巧

复制代码 代码如下: var date1=new Date(dateTimes[z][1]); 在火狐下 可以正常取得时间,在IE7下 却是 NaN.纠结老长时间,放弃了new date 然后再老外的论坛中找了一段段代码可以兼容所有浏览器的格式化日期代码: 复制代码 代码如下: function NewDate(str) { str = str.split('-'); var date = new Date(); date.setUTCFullYear(str[0], str[1] - 1, s

IE7中javascript操作CheckBox的checked=true不打勾的解决方法_javascript技巧

复制代码 代码如下: var chkbox = document.createElement("INPUT"); chkbox.type = "checkbox"; chkbox.checked=true; lnk.parentNode.appendChild(chkbox); 以上代码在IE7下,生成的Checkbox无法正确的打上勾. 原因是 chkbox控件还没初始化(appendChild),就开始操作它的结果 据此将代码改为即可正确显示: 复制代码 代码如

php中json_encode处理gbk与gb2312中文乱码问题的解决方法_php技巧

本文讲述了php中json_encode处理gbk与gb2312中文乱码问题的解决方法,具体方法如下: 1.json_encode()中文在gbk/gb2312中对中文返回为null $arr = array ( array ( 'catid' => '4', 'catname' => 'www.jb51.net', 'meta_title' => '' ) ); echo json_encode($arr); 运行结果: [{"catid":"4"

url传递的参数值中包含&amp;时,url自动截断问题的解决方法_javascript技巧

一.问题的引出 在做一个公告浏览功能时,只要通过url传递的某参数值中包含 & 或  ,就会出现问题--该变量的值无法显示. 问题定位结果: 遇到&时,该参数的值会自动截断,导致参数值传递有误. 二.问题的解决 java代码中做如下测试: String  charEncode = java.net.URLEncoder.encode("&"); System.out.println("字符& 转译后的值为:" + charEncode

TinyMCE提交AjaxForm获取不到数据的解决方法_javascript技巧

本文实例分析了TinyMCE提交AjaxForm获取不到数据的解决方法.分享给大家供大家参考.具体分析如下: 在没有使用AjaxForm前,我做的一个小小的评论提交的Web form,评论内容使用了TinyMCE做文本编辑.为了增加一点点的用户体验,就顺手拿AjaxForm来实现Ajax提交.可是发现出现了一个意外的事情.就是每次提交,第一次提交时,AjaxForm会无法获得当前编辑的评论内容,即TextArea里面的内容,要再点击一次提交,才能将TextArea的内容提交上去. 关键是Tiny

IE8中动态创建script标签onload无效的解决方法_javascript技巧

本文实例讲述了IE8中动态创建script标签onload无效的解决方法.分享给大家供大家参考.具体分析如下: 今天做项目,发现一个奇怪的问题,动态创建的script标签在IE8下无法触发onload事件. 代码如下: 复制代码 代码如下: var loadJs = function(src, fun){     var script = null;     script = document.createElement("script");     script.type = &qu