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 .