介绍 let addEduView =,函数(){
,this.edus.push ({})
} let deleteEducation =,函数(指数){
,if (index !==, 0), {
this.edus.splice才能(指数,1)
,}
}
这篇文章给大家分享的是有关Vue中形式表单动态如何添加组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
效果如下:
这种效果实现其实就是对<代码> v 指令的一种使用,<代码>组件>
<强>案例效果的实现
<强> 1。创建组件
首先我们创建一个单独的组件,同时在<代码> 模板中定义我们的表单元素,此处使用的是UI代码 <代码>元素来实现效果。
<强> 2。进口组件
我们需要在父组件中引入创建的组件,并通过<代码> v代表>
使用组件
在<代码> 数据中定义<代码> edu>
<强> 3。实现添加功能
要实现动态添加组件的功能,我们需要通过点击添加的按钮来增加数组<代码> edu>
如此即可实现动态添加的功能。
<强> 4。实现移除功能
实现移除动态添加的组件,我们需要在组件中调用父组件中的方法。如下
父组件中定义移除的方法
子组件中回调
<强> 5。提交数据
当我们要提交表单数据的时候,怎么将动态添加的组件中的数据一并提交给后台服务呢,步骤如下:
提交数据的时候将<代码> edu> 数据提交到后台。
<强> 6。清空组件
最后操作完成需要将动态添加的组件处理掉怎么实现呢?其实效果很简单,我们只需要清空<代码> edu>
感谢各位的阅读!关于“Vue中形式表单动态如何添加组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
