element的表单校验输入框有值但校验未通过的问题

先说重点,prop中的名称要和ruleForm中对应的字段名一致

上element UI 官方文档

       <div class="details_main">
          <el-form ref="form" :model="form" :rules="rules" class="detail_form">
            <template>
              <div v-for="(item, index) in subjectData" :key="item.id">
                <!-- 单选循环处 -->
                <el-form-item
                  v-if="item.tmlxD == 'RADIO'"
                  label=" "
                  class="form_item"
                  :prop="'radio' + [index + 1]"
                >
                  <p class="form_title">{{ item.tmmc }}</p>
                  <!-- 单选选项循环 -->
                  <el-radio-group
                    v-model="form['radio' + [index + 1]]"
                    class="group_style"
                    :disabled="disabledShow"
                    @change="radioFn(item, index)"
                  >
                    <template>
                      <div
                        v-for="radioOption in item.tmxxPoList"
                        :key="radioOption.id"
                        :label="index + 1"
                      >
                        <el-radio
                          v-model="form['radio' + [index + 1]]"
                          :label="radioOption.id"
                        >
                          {{ radioOption.tmxx }}
                        </el-radio>
                      </div>
                    </template>
                  </el-radio-group>
                </el-form-item>
                <!-- 多选循环处 -->
                <el-form-item
                  v-if="item.tmlxD == 'MULTIPLE'"
                  required
                  label=""
                  class="form_item"
                >
                  <!-- 多选选项循环 -->
                  <p class="form_title">{{ item.tmmc }}</p>
                  <el-checkbox-group
                    v-model="form['checked' + [index + 1]]"
                    class="group_style"
                    :disabled="disabledShow"
                    @change="checkFn(item, index)"
                  >
                    <el-checkbox
                      v-for="checkItem in item.tmxxPoList"
                      :key="checkItem.id"
                      :label="checkItem.id"
                      >{{ checkItem.tmxx }}</el-checkbox
                    >
                  </el-checkbox-group>
                </el-form-item>
                <!-- 问答问题循环处 -->
                <el-form-item
                  v-if="item.tmlxD == 'QA'"
                  required
                  label=""
                  class="form_item"
                >
                  <p class="form_title">
                    {{ item.tmmc }}
                  </p>
                  <el-input
                    v-model="form['wd' + [1 + index]]"
                    placeholder="请输入"
                    type="textarea"
                    rows="6"
                    :disabled="disabledShow"
                    @change="textareaFn(item, index)"
                  />
                </el-form-item>
              </div>
            </template>
          </el-form>
        </div>

 

起初以为prop中字段名称只要和rules对应一致就行,然后就各种尝试,都不行。百度寻找方法,各种条件都满足了,还是不能正常校验(我比较奇葩,乱换名称)。最后对着官方文档一一验证,最后发现问题所在。

没事不要乱换名字!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值