【循环el-from验证】vue-elementul中直接循环el-from如何验证，不是循环el-from-item_form循环表单验证,监听不到

前文

今天遇到的需求是做一个添加试题的功能，于是用了表单。
然后因为我需要每一个块内都有删除可以删除对应模块。所以根据文档的那种循环没法弄。
就直接把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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161