【循环el-from验证】vue-elementul中直接循环el-from如何验证，不是循环el-from-item

前文

今天遇到的需求是做一个添加试题的功能，于是用了表单。
然后因为我需要每一个块内都有删除可以删除对应模块。所以根据文档的那种循环没法弄。
就直接把from表单循环了。后来就发现循环表单的话用官网的验证方法怎么都不生效，要不就是报错，然后网上也没找到，因为百度我看着都是循环的el-from-item的，没有直接循环from的
所以跟我的都不适用。我就自己慢慢琢磨出来了写法，记录一下

效果图

代码

这里重点：

1，prop的名字一定要和你的下面input的model变量名一样。不然就会出现你不管填不填值都有提示显示，因为检测不到。这个坑了我好久。

2，验证功能思路：因为把from放在了循环内。所以直接用官网的方法会分不清是哪一个的。因为返回的是一个数组就会报错，所以当我们用this.$refs[formName][0].validate((valid) => {}时可以验证到数组内的第一个，但是这样就会一直验证第一个也就是角标0的那一条。其他的不验证。所以我用循环直接每一条都验证一遍，这里的n是用来计数的，因为如果没有n的话他第一条验证通过了之后直接就会执行成功的方法，这不对，应该所有的全部验证通过才执行，所以我再每次验证成功的时候就n+1。然后通过判断如果n也就是成功的次数和循环的数组长度一致就代表全部验证成功。那就执行方法。而我们每次都会点击提交，触发后n就会=0，所以也不用担心会一直加下去的情况，必须要点击一次循环全部成功，才可能对上。

<template class="judge_wrap">
  <div>
    <div class="judge" @click="dialogFormVisible = true">判断题</div>
    <el-dialog
      title="选择题"
      :visible.sync="dialogFormVisible"
      :modal="false"
      top="3vh"
      width="600px"
    >
      <div style="border-bottom: 1px #ccc solid; margin-bottom: 25px">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          class="from_btn"
          @click="addTopic"
          >新增题目</el-button
        >
      </div>
      <div class="dialog_height">
        <div class="from_box" v-for="(item, index) in topicList" :key="index">
          <el-form
            :model="item.dynamicValidateForm"
            ref="dynamicValidateForm"
            label-width="100px"
            class="demo-dynamic"
            :rules="rules"
          >
            <el-form-item prop="title" label="题目">
              <el-input
                v-model="item.dynamicValidateForm.title"
                style="width: 320px"
              ></el-input>
            </el-form-item>
            <el-form-item label="选项">
              <el-input
                :disabled="true"
                v-model="item.dynamicValidateForm.domain[0]"
                style="width: 320px"
              ></el-input>
            </el-form-item>
            <el-form-item label="选项">
              <el-input
                :disabled="true"
                v-model="item.dynamicValidateForm.domain[1]"
                style="width: 320px"
              ></el-input>
            </el-form-item>
            <el-form-item label="正确答案" prop="answer">
              <el-radio-group v-model="item.dynamicValidateForm.answer">
                <el-radio label="正确"></el-radio>
                <el-radio label="错误"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="remove_dom(item)"
                >删除题目</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')"
          >提 交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //弹框显示隐藏 
      dialogFormVisible: false,
      //选项值
      topicList: [
        {
          key: Date.now(),
          dynamicValidateForm: {
            domain: ["正确", "错误"],
            title: "",
            answer: "",
          },
        },
      ],
      rules: {
        title: [{ required: true, message: "请输入题目", trigger: "blur" }],
        answer: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
      },
    };
  },
  methods: {,
    //提交按钮
    submitForm(formName) {
      let n=0
      this.topicList.forEach((item, index) => {
        this.$refs[formName][index].validate((valid) => {
          if (valid) {
            n++
            if(n==this.topicList.length){
                alert('提交成功')
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.judge {
  width: 300px;
  height: 200px;
  margin: auto;
  margin-top: 180px;
  text-align: center;
  line-height: 200px;
  font-size: 38px;
  color: #fff;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  margin-bottom: 25px;
  box-shadow: 0px 0px 15px 5px #97d9e1;
  background-image: linear-gradient(#32cbc6, #2d94a7);
}
.judge:hover {
  background-image: linear-gradient(#0093e9, #2d94a7);
  box-shadow: 0px 0px 15px 5px #0093e9;
}
.from_box {
  border-bottom: 1px #ccc solid;
  margin-bottom: 20px;
}
.from_btn {
  margin-left: 410px;
  margin-bottom: 5px;
}
.dialog_height {
  height: 430px;
  overflow: auto;
}
</style>
<style >
.judge_wrap .el-dialog {
  border-radius: 20px;
}
</style>