Vue.js VeeValidate 3 setErrors当前输入更改的错误消息
我对两个输入进行了验证。我想在更改输入中的数据的同时,使用vee validate的setErrors()方法在两个输入上设置错误消息Vue.js VeeValidate 3 setErrors当前输入更改的错误消息,vue.js,vee-validate,Vue.js,Vee Validate,我对两个输入进行了验证。我想在更改输入中的数据的同时,使用vee validate的setErrors()方法在两个输入上设置错误消息 问题:在当前输入更改数据上不显示消息错误 预期结果:我希望在两个输入上看到错误消息 <template> <div> <ValidationObserver ref="adad" v-slot="{ passes }"> <ValidationProvide
问题:在当前输入更改数据上不显示消息错误
预期结果:我希望在两个输入上看到错误消息
<template>
<div>
<ValidationObserver ref="adad" v-slot="{ passes }">
<ValidationProvider name="min" mode="lazy" rules="required" v-slot="{ errors }">
<input type="number" v-model.number="minValue" @change="handleErrors">
<span>{{ errors[0] }}</span>
</ValidationProvider>
<ValidationProvider name="max" mode="lazy" rules="required" v-slot="{ errors }">
<input type="number" v-model.number="maxValue" @change="handleErrors">
<span>{{ errors[0] }}</span>
</ValidationProvider>
<button @click="passes(handleErrors)">Validate</button>
</ValidationObserver>
</div>
</template>
<script>
import { extend } from "vee-validate";
extend("between", {
params: ["min", "max"],
validate(value, { min, max }) {
return value >= min && value <= max;
},
message: "This field value must be between {min} and {max}"
});
export default {
data: () => ({
minValue: 0,
value: 1,
maxValue: 10
}),
methods: {
handleErrors() {
console.log("====> handleErrors");
this.$refs.adad.setErrors({
min: "hello world",
max: "hello world"
});
}
}
};
</script>
{{错误[0]}
{{错误[0]}
验证
从“vee validate”导入{extend};
扩展(“介于”{
参数:[“最小”、“最大”],
验证(值,{min,max}){
返回值>=min&&value({
最小值:0,
价值:1,
最大值:10
}),
方法:{
handleErrors(){
console.log(“=>handleErrors”);
此.$refs.adad.setErrors({
敏:“你好,世界”,
马克斯:“你好,世界”
});
}
}
};