vue+element 动态添加表单以及提交表单

实现效果

html代码：

<el-form-item label="问题选项:" :label-width="formLabelWidth" prop="options" :inline="true">
    <el-button @click="addItem" size="mini">添加选项</el-button>
    <div v-for="(item, index) in addform.options" :key="index">
         <el-row :gutter="20">
             <el-col :span="6">
                 <div class="grid-content bg-purple">
                      <el-form-item
                         :prop="'options.' + index + '.item'"
                         :rules="{
                            required: true, message: '选项序号不能为空', trigger: 'blur'
                          }"
                      >
                       		<el-input placeholder="请输入选项序号,如A,B" autocomplete="off" size="small" v-model="item.item">			</el-input>
                      </el-form-item>
                  </div>
               </el-col>
               <el-col :span="6">
                   <div class="grid-content bg-purple" >
                        <el-form-item
                            :prop="'options.' + index + '.text'"
                            :rules="[
                              {required: true, message: '选项内容不能为空', trigger: 'blur'},
                            ]"
                         >
                         <el-input placeholder="请输入选项内容" autocomplete="off" size="small" v-model="item.text">		</el-input>
                        </el-form-item>
                     </div>
                 </el-col>
                 <el-col :span="6">
                     <div class="grid-content bg-purple">
                          <el-form-item>
                              <i class="el-icon-delete" @click="deleteItem(item, index)"></i>
                          </el-form-item>
                       </div>
                  </el-col>
              </el-row>
          </div>
      </el-form-item>

JS代码：

//新增选项
        addItem () {
          this.addform.options.push({
            item: this.item,
            text: this.text
          })
        },
        deleteItem (item, index) {
          this.addform.options.splice(index, 1)
        },

数据的提交（JSON字符串）：

addform: {
            options: [{
              item: '',
              text: '',
            }]
          },

add: function(){
          this.title='';
          this.dialogformVisible = true;
          this.addform={
            options: [{
              item: '',
              text: '',
            }]
          };
          this.isadd=true;
          this.getProjectList();
        },

//新增
        cancelBtn1: function() {
          this.dialogformVisible = false;
          this.getProjectList();
        },
        sureBtn1: function(addform) {
          this.$refs[addform].validate((valid) => {
          console.log(valid);
          if (valid) {
          } else {
              return false;
            }
        });
        var addform = this.addform;
        let data = new FormData();
        data.append('options', JSON.stringify(addform.options));
        if (this.isadd == true){
          axios.post("",     //后端提供接口
          data,
            {
              headers: {
                'token': sessionStorage.getItem('token'),
                'Content-type': 'Content-Type: application/json'
              },
            }).then((response) => {
                if (response.data.code == 200) {
                  this.$message({ message: response.data.message, duration: 3000, type: 'success' });
                  this.dialogformkVisible = false;
                  this.getProjectList();
                } else {
                    this.$message({ message: response.data.message, duration: 2000, type: 'warning' });
                  }
              }).catch(function (error) {
                  console.log(error)
              });
          }
        },