解决Element-u的 el-form 使用 v-if校验失灵问题
在 element-ui
的校验过程中,鉴于使用自带的校验方式,繁琐且麻烦,因而使用了 element-ui-verify
的插件。但是现在碰到一个新的问题,不知道具体是哪块问题,看了两个的源码,想使用 element-ui
自带的 addFields
时,无法生效,因而是内部方法,外部无法拿到 【此处先记一笔,看看后期这块是否是解决的要点】。
主要出现的问题是,使用了 v-if
时,导致无法有效被 element-ui
知晓,而报 [Element Warn]please pass correct props!
,意思就是说使用 v-if
的字段无法及时被收录。而这个是概率问题,有时候可以有时候不行。目前还无法有效判断出来。
<template v-if="editMobile">
<el-row type="flex" :gutter="2" v-if="editMobile">
<el-col :span="20">
<el-form-item
ref="captcha"
label="验证码:"
prop="captcha"
verify
:length="4"
>
<el-input v-model="form.captcha" placeholder="可以点击图片更换验证码" class="personal-input__append">
<template slot="append">
<img :src="captchaUrl" alt="验证码" @click="createCaptchaUrl">
</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
</template>
使用 v-if="editMobile"
时,有时作用在 template
时,校验马上生效,而自己又不像这样,因而放在 el-form-item
上时,可以有效避开,但是却会在校验时,报上诉错误。这块还真有必要好好纠结一番了
经过查证发现需要给
v-if
的元素添加唯一键key
即可解决