vue 实现动态表单，点击新增 增加一行输入框

功能说明

存在一排必填，点击增加后会新增一行，点击每行后面的删除图标则会删除该行，新增按钮只会出现在最后一行

动态表单部分

data部分

方法

效果

代码

html

 
        

          
            
          
          
            
          
          
            增加
            删除
          
        
      

data

 form: {
        dynamicItem: [
          {
            name: "",
            phone: ""
          }
        ]
      },

方法

 addItem() {
      this.form.dynamicItem.push({
        name: "",
        phone: ""
      });
    },
    sure(form) {
      console.log(this.form.dynamicItem.length, "length");
      this.$refs[form].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1);
      console.log(this.form.dynamicItem, "删除");
    },