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 相关文章推荐
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
Python的迭代器和生成器
2015/07/29 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
详解Python装饰器由浅入深
2016/12/09 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
对python中的装包与解包实例详解
2019/08/24 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
化验室技术员岗位职责
2013/12/24 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
生日宴会策划方案
2014/06/03 职场文书
营销学习心得体会
2014/09/12 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
商务考察邀请函模板
2015/02/02 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
vue+element ui实现锚点定位
2021/06/29 Vue.js
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技