vue element 循环ref遇到的一个小坑

<div v-for="(item,index) in formList" :key="index">
        <el-form :ref="`Form${index}`" :model="item" label-width="200px" label-position="left" class="three-form"  :rules="item.rule">
          <!-- type为1 单选题 -->
          <el-form-item v-if="item.type === 1" prop="data">
            <div slot="label" style="display:inline-block">
                <span>{{ item.name }}</span>
                <el-tooltip class="item" effect="dark" :content="item.describe" placement="top">
                  <i class="el-icon-warning" style="margin-left:8px"></i>
                </el-tooltip>
            </div>
            <el-radio-group v-model="item.data">
              <el-radio :label="check.name" v-for="(check,index) in item.choice" :key="index"></el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- type为2 多选题 -->
          <el-form-item v-if="item.type === 2" prop="data">
            <div slot="label" style="display:inline-block">
                <span>{{ item.name }}</span>
                <el-tooltip class="item" effect="dark" :content="item.describe" placement="top">
                  <i class="el-icon-warning" style="margin-left:8px"></i>
                </el-tooltip>
            </div>
            <el-checkbox-group v-model="item.data">
              <el-checkbox :label="check.name" :name="check.name" v-for="(check,index) in item.choice" :key="index"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!-- type为3 填空题 -->
          <el-form-item v-if="item.type === 3" prop="data">
            <div slot="label" style="display:inline-block">
                <span>{{ item.name }}</span>
                <el-tooltip class="item" effect="dark" :content="item.describe" placement="top">
                  <i class="el-icon-warning" style="margin-left:8px"></i>
                </el-tooltip>
            </div>
            <el-input v-model="item.data"></el-input>
          </el-form-item>
        </el-form>
      </div>
复制代码

因为项目的需求 表单生成的东西是后端返回的 ，前端须要对这些数据进行必填验证以及根据type进行不一样的类型表单。

// 循环每个判断是否填写
    let num = 0
    this.formList.forEach((element,index) => {
      this.$refs[`Form${index}`][0].validate((valid) => {
        if (valid) {
          console.log('成功')
        } else {
          num++
          console.log('error submit!!');
          return false;
        }
      })
    })
    // 只要有一个不经过 则不进行跳转
    if(!num){
      this.$router.push('/business')
      this.setSession('subject',this.formList)
    }
复制代码

我这边想利用循环进行操做，发现一直找不到 refs[Form0] 后来打印出来发现他是一个数组 因而我就加上[0]发现OK了。 中途一直报错 refs[Form${index}] undefine .