vue template 表单验证 v-if bug All In One
template & v-if 表单验证会抽风，随机触发验证规则 bug
<template v-if="isShowDeepBid && ruleForm.deepBidType === 'DEEP_BID_MIN'">
<el-form-item class="is-required" label="出价" prop="deepConvertPrice"
:rules="[
{
required: true,
message: '请输入出价,
trigger: 'blur',
validator: deepConvertPriceValidate,
},
]">
<el-input
class="tm-convert-price"
style=" 300px;"
placeholder="请输入出价"
v-model="ruleForm.deepConvertPrice">
<span slot="suffix" class="tm-custom-suffix">元</span>
</el-input>
</el-form-item>
</template>
solution
template v-if 下面的 el-form-item 添加 unique key
<template v-if="isShowDeepBid && ruleForm.deepBidType === 'DEEP_BID_MIN'">
<el-form-item class="is-required" label="出价" prop="deepConvertPrice" key="deepConvertPrice"
:rules="[
{
required: true,
message: '请输入出价,
trigger: 'blur',
validator: deepConvertPriceValidate,
},
]">
<el-input
class="tm-convert-price"
style=" 300px;"
placeholder="请输入出价"
v-model="ruleForm.deepConvertPrice">
<span slot="suffix" class="tm-custom-suffix">元</span>
</el-input>
</el-form-item>
</template>
<template v-if="isShowDeepBid && ruleForm.deepBidType === 'DEEP_BID_MIN'" key="deepConvertPrice">
<el-form-item class="is-required" label="出价" prop="deepConvertPrice"
:rules="[
{
required: true,
message: '请输入出价,
trigger: 'blur',
validator: deepConvertPriceValidate,
},
]">
<el-input
class="tm-convert-price"
style=" 300px;"
placeholder="请输入出价"
v-model="ruleForm.deepConvertPrice">
<span slot="suffix" class="tm-custom-suffix">元</span>
</el-input>
</el-form-item>
</template>
手动触发校验
deepBidTypeChange (value = '') {
const vaildteDict = ['DEEP_BID_MIN', 'ROI_COEFFICIENT'];
if(vaildteDict.includes(value)) {
this.$emit('clear-validate-field-by-key', 'deepConvertPrice');
this.$emit('clear-validate-field-by-key', 'roiGoal');
this.$nextTick(() => {
const keyMap = new Map([['DEEP_BID_MIN', 'deepConvertPrice'], ['ROI_COEFFICIENT', 'roiGoal']]);
this.$emit('validate-field-by-key', keyMap.get(value));
});
}
},
refs
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 ️，侵权必究⚠️！