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系列(15) 函数(Functions)
Apr 12 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 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中文汉字验证码
2007/04/08 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
php数组键值用法实例分析
2015/02/27 PHP
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
运动会口号8字
2014/06/07 职场文书
卫生标语大全
2014/06/21 职场文书
投标授权委托书范文
2014/08/02 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
邀请函怎么写
2015/01/30 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
Pandas 数据编码的十种方法
2022/04/20 Python