• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > vue项目中做编辑功能传递数据时遇到问题的解决方法

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

作者:luckylqh 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含vue项目,vue项目实战,vue项目实例,vue项目搭建,运行vue项目等相关知识,luckylqh 希望在学习及工作中可以帮助到您

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


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

</div>

这是点击编辑时执行的方法,下面是向子组件传递的数据

listdb:{
  executorName:'',
  executorId:'',
  state:'',
  ProjVerId:'',
  content:''
},

</div>

开始的时候,只是定义了一个空的数据像这样:

listdb:{},

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

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

</div>

您可能想查找下面的文章:

  • vue打包项目后正确显示图片
  • vue项目优化
  • vue-cli如何快速构建vue项目
  • 详解Vue使用 vue-cli 搭建项目
  • vue构建单页面应用实战
  • vue图片加载与显示默认图片实例代码
  • Vue实现自带的过滤器实例
  • Vue实例简单方法介绍
  • vue项目中做编辑功能传递数据时遇到问题的解决方法

相关文章

  • 2017-05-30Vue.js bootstrap前端实现分页和排序
  • 2017-05-30Vue.js第四天学习笔记(组件)
  • 2017-05-30Vue实现动态响应数据变化
  • 2017-05-30vue.js中mint-ui框架的使用方法
  • 2017-05-30基于vuejs实现一个todolist项目
  • 2017-05-30深入对Vue.js $watch方法的理解
  • 2017-05-30Vuex之理解state的用法实例
  • 2017-05-30vue之nextTick全面解析
  • 2017-05-30vue2的todolist入门小项目的详细解析
  • 2017-05-30vue项目中做编辑功能传递数据时遇到问题的解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • vue中如何引入jQuery和Bootstrap
    • 一个例子轻松学会Vue.js
    • Vuex2.0+Vue2.0构建备忘录应用实践
    • 第一次接触神奇的前端框架vue.js
    • vuejs怎么在服务器上发布部署
    • 详解vue-router基本使用
    • Vue.js实战之组件之间的数据传递
    • 干货!教大家如何选择Vue和React
    • 基于Vue.js实现简单搜索框
    • Vue.js第四天学习笔记

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有