在form表单中点击添加dom元素

需求：在form表单中点击可以添加dom元素，如下图

思路：使用数字循环，点击之后数字加1，实现元素的添加。data中定义其变量的时候，将其定义为数组

     
        
             
                
             
       
        
             
        
    
    
        
            
                
             
        
        
            
                
            
        
        
             
                
             
        
     

data(){
    return{
        internetNum:1,
        form:{
            cards:{
                name:[],
                mac:[],
                ip:[],
                mask:[]
            }
        }
    }
}
index of 3   数字循环
:label="`IP${index}`"   
form.cards.ip[index-1]

最后在清空form表单的时候遇到一个问题：使用 this.$refs[formName].resetFields()无法清空cards中的数据，尝试添加上props 但是无效，最后使用最傻的办法，手动置空，如下：
this.form.cards = {
    name: [],
    mac: [],
    ip: [],
    mask: []
 }

后期优化：

首先将数据结构优化入下：
this.form.cards = [{
    name:'',
    mac:'',
    ip:'',
    mask:''
}]

代码：

    
        
            
                
            
       
        
            
        
        
             
        
    

    
        
             
                 
             
       
        
             
               
            
       
        
            
                
            
        
    

methods:{
    addItem(){  // 增加一个元素
        this.form.cards.push({
            name:'',
            mac:'',
            ip:'',
            mask:''
        })
    }，
    reduceItem(index){ //减少一个元素
        this.form.cards.splice(index,1)
    }
}