Vue form表单动态添加组件实战案例
更新时间：2019年09月02日 11:30:53 作者：波波烤鸭
这篇文章主要介绍了Vue form表单动态添加组件实战案例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景，就是在form中我们需要动态的增加组件模块，效果如下:
这种效果实现其实就是对 v-for 指令的一种使用，组件不是必须的，只是为了将这部门的代码我们单独的拎出来，便于查看，好了，话不多说，我们来看下具体怎么来实现。
案例效果的实现
1.创建组件
首先我们创建一个单独的组件，同时在 template 中定义我们的表单元素，此处使用的是 element UI 来实现效果。
2.import组件
我们需要在父组件中引入创建的组件，并通过 v-for 来实现动态处理的效果，关键代码如下
使用组件
在 data 中定义 edus 数组.
3.实现添加功能
要实现动态添加组件的功能，我们需要通过点击添加的按钮来增加数组 edus 中的元素，如下
let addEduView = function(){
this.edus.push({})
}
如此即可实现动态添加的功能。
4.实现移除功能
实现移除动态添加的组件，我们需要在组件中调用父组件中的方法。如下
父组件中定义移除的方法
let deleteEducation = function(index){
if (index !== 0) {
this.edus.splice(index, 1)
}
}
子组件中回调
5.提交数据
当我们要提交表单数据的时候，怎么将动态添加的组件中的数据一并提交给后台服务呢，步骤如下:
提交数据的时候将 edus 数组中的数据和表单数据一块转换为 JSON 数据提交到后台。
6.清空组件
最后操作完成需要将动态添加的组件处理掉怎么实现呢？其实效果很简单，我们只需要清空 edus 数组即可
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目中的类使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue自定义marquee无缝滚动组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
详解windows下vue-cli及webpack 构建网站(三)使用组件
本篇文章主要介绍了详解windows下vue-cli及webpack 构建网站(三)使用组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了Vue3网站首页布局开发，上篇文章已经提到集成Ant Design Vue后，和Element Ui一样，还是组件的使用，接下俩我们就来看看Vue3网站首页布局开发的相关资料,需要的朋友可以参考下面文章的具体内容2021-10-10
video-player是一个基于video.js的视频播放器组件,本文主要介绍了Vue3使用video-player实现视频播放,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了vue改变对象或数组时的刷新机制的方法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
本文主要介绍了Vue3封装自动滚动列表指令(含网页缩放滚动问题），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
众所周知在写循环的时候给循环中的数据定义ref以便再下面直接通过this.$ref.来访问,下面这篇文章主要给大家介绍了关于vue如何在for循环中设置ref并获取$refs的相关资料,需要的朋友可以参考下2022-12-12
如果项目中多个组件都使用到WebSocket请求,那么我们需要对WebSocket进行封装,方便我们使用,下面这篇文章主要给大家介绍了关于Vue2和Vue3中如何使用WebSocker封装的相关资料,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了手写实现Vue计算属性，本文从一个简单的计算属性例子开始，一步步实现了计算属性。并且针对这个例子，详细分析了页面渲染时的整个代码执行逻辑，需要的小伙伴可以参考一下2022-08-08
最新评论