[英]Validate value prop before method on @input event runs? VeeValidate/Vue
Code Sandbox with exact example带有确切示例的代码沙箱
https://codesandbox.io/s/veevalidate-components-vuetify-iftco
https://codesandbox.io/s/veevalidate-components-vuetify-iftco
In the example above, when I enter a wrong value in the input field, the Validation state returns Valid == true
, but it should return false
.在上面的示例中,当我在输入字段中输入错误的值时,验证状态返回
Valid == true
,但它应该返回false
。
I understand that this happens because the @input
event method ( resize
) will run first and then it will assign the value to :value
.我知道发生这种情况是因为
@input
事件方法( resize
)将首先运行,然后它将值分配给:value
。 In other words, vee-validate
checks the existing value before the event is fired.换句话说,
vee-validate
在触发事件之前检查现有值。
Not sure how to fix it so that the input value is first validated and then the method is run!不知道如何修复它以便首先验证输入值然后运行该方法!
How to replicate problem:如何复制问题:
width
field to 5width
字段的值更改为 5 I am not sure how to fix this.我不知道如何解决这个问题。 I have been trying for hours..
我已经尝试了几个小时..
<template>
<v-app>
<v-row>
<v-col v-for="(value, key) in fixture.dimensions" :key="key">
<ValidationProvider
:rules="`between:${fixture.limits[key].min},${fixture.limits[key].max}`"
v-slot="{ errors, valid }"
>
<v-text-field
:value="fixture.dimensions[key]"
@input="resize(key, valid)"
:label="key"
ref="key"
:min="fixture.limits[key].min"
:max="fixture.limits[key].max"
:error-messages="errors"
outlined
type="number"
></v-text-field>
</ValidationProvider>
</v-col>
</v-row>
</v-app>
</template>
<script>
import { ValidationProvider } from "vee-validate";
export default {
name: "App",
components: {
ValidationProvider
},
data: () => ({
fixture: {
dimensions: {
width: 1000,
height: 1500
},
limits: {
width: {
min: 300,
max: 1500
},
height: {
min: 300,
max: 1500
}
}
}
}),
mounted() {
console.log(this.fixture);
},
methods: {
resize(key, valid) {
console.log("valid?", valid);
this.fixture.dimensions[key] = event.target.value;
// this.fixture.iconObject.resize()
}
}
};
</script>
If you are not using v-model
to manage the input, you should explicitly call validate
yourself, like this:如果您没有使用
v-model
来管理输入,您应该自己显式调用validate
,如下所示:
<ValidationProvider
:rules="`between:${fixture.limits[key].min},${fixture.limits[key].max}`"
v-slot="{ errors, valid, validate }"
>
<v-text-field
:value="fixture.dimensions[key]"
@input="resize(key, $event, validate)"
...
></v-text-field>
</ValidationProvider>
resize(key, value, validate) {
validate(value).then(result => {
console.log("valid???");
console.log(result.valid);
//either way update value
this.fixture.dimensions[key] = value;
});
}
In the callback from validate, you get a result
object that includes whether the result is valid, and also which rules failed (in result.failedRules
) and any error messages in an array (in result.errors
).在来自 validate 的回调中,您将获得一个
result
对象,其中包括结果是否有效,以及哪些规则失败(在result.failedRules
)和数组中的任何错误消息(在result.errors
)。 See it working here: https://codesandbox.io/s/veevalidate-components-vuetify-ynll5看到它在这里工作: https : //codesandbox.io/s/veevalidate-components-vuetify-ynll5
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.