Vue form表单动态添加组件实战案例


Posted in Javascript onSeptember 02, 2019

今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,就是在form中我们需要动态的增加组件模块,效果如下:

Vue form表单动态添加组件实战案例

这种效果实现其实就是对 v-for 指令的一种使用,组件不是必须的,只是为了将这部门的代码我们单独的拎出来,便于查看,好了,话不多说,我们来看下具体怎么来实现。

案例效果的实现

1.创建组件

首先我们创建一个单独的组件,同时在 template 中定义我们的表单元素,此处使用的是 element UI 来实现效果。

Vue form表单动态添加组件实战案例

2.import组件

我们需要在父组件中引入创建的组件,并通过 v-for 来实现动态处理的效果,关键代码如下

Vue form表单动态添加组件实战案例

使用组件

Vue form表单动态添加组件实战案例

data 中定义 edus 数组.

Vue form表单动态添加组件实战案例

3.实现添加功能

要实现动态添加组件的功能,我们需要通过点击添加的按钮来增加数组 edus 中的元素,如下

Vue form表单动态添加组件实战案例

let addEduView = function(){
 this.edus.push({})
}

如此即可实现动态添加的功能。

4.实现移除功能

实现移除动态添加的组件,我们需要在组件中调用父组件中的方法。如下

父组件中定义移除的方法

let deleteEducation = function(index){
 if (index !== 0) {
  this.edus.splice(index, 1)
 }
}

Vue form表单动态添加组件实战案例

子组件中回调

Vue form表单动态添加组件实战案例

5.提交数据

当我们要提交表单数据的时候,怎么将动态添加的组件中的数据一并提交给后台服务呢,步骤如下:

Vue form表单动态添加组件实战案例

Vue form表单动态添加组件实战案例

提交数据的时候将 edus 数组中的数据和表单数据一块转换为 JSON 数据提交到后台。

Vue form表单动态添加组件实战案例

6.清空组件

最后操作完成需要将动态添加的组件处理掉怎么实现呢?其实效果很简单,我们只需要清空 edus 数组即可

Vue form表单动态添加组件实战案例

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

Javascript 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
小程序和web画三角形实现解析
Sep 02 #Javascript
vue-cli随机生成port源码的方法
Sep 02 #Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 #Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 #Javascript
js中比较两个对象是否相同的方法示例
Sep 02 #Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 #Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 #Javascript
You might like
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
pyv8学习python和javascript变量进行交互
2013/12/04 Python
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
python自定义函数def的应用详解
2020/06/03 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
《骑牛比赛》教后反思
2014/04/22 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
学校实习推荐信
2015/03/27 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL