vue template 表单验证 v-if bug All In One

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="width: 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="width: 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="width: 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, 禁止转载 🈲️，侵权必究⚠️！

---