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 相关文章推荐
JS date对象的减法处理实现代码
Dec 28 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
vue组件从开发到发布的实现步骤
Nov 11 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 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
推荐文章系统(一)
2006/10/09 PHP
php实现的遍历文件夹下所有文件,编辑删除
2010/01/05 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
Vue指令指令大全
2019/02/09 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
Python定时执行之Timer用法示例
2015/05/27 Python
使用Python写CUDA程序的方法
2017/03/27 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
flask 实现token机制的示例代码
2019/11/07 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
Solaris操作系统的线程机制
2015/07/28 面试题
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
迎新晚会策划方案
2014/06/13 职场文书
2015年教师节活动总结
2015/03/20 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技