我使用了vuetify中的vuelidate验证表单,但是没有规则检查用户是否输入了浮点数。因此,我编写了自己的函数来检查用户是否键入了浮点数。现在的问题是,如果this。$ v.invalid为TRUE(由vuelidate检测到错误),则我的按钮被禁用,但是如果我的自定义函数检测到错误(未给出浮点数),则无法更改此值$ v.invalid,这样我的按钮将保持禁用状态,直到用户修复他的错误(给出浮点数)为止...有想法吗?
<!-- my submit button -->
<v-btn
@click="submit()"
title="Submit"
color="primary"
:disabled="$v.$invalid"
>Submit</v-btn
>
<!-- Textfield -->
<v-text-field
v-model="money"
:error-messages="moneyErrors"
label="Money"
required
@input="$v.money.$touch()"
@blur="$v.money.$touch()"
></v-text-field>
<script>
export default {
validations: {
money: { required, maxLength: maxLength(3) }
},
data() {
return {
money: "",
};
},
computed: {
// validation functions ( return errors )
moneyErrors() {
const errors = [];
var floatBetweenRegex = /^(100(\.0{1,2})?|[1-9]?\d(\.\d{1,2})?)$/;
// works without problem
if (!this.$v.money.$dirty) {
return errors;
}
// works without problem
if (!this.$v.money.required) {
errors.push("Money is required");
return errors;
}
// ----> DOESN'T works ( if i had here an error button don't stays desabled ....
if (!floatBetweenRegex.test(this.money)) {
errors.push("Must must be a float between 0 and 100");
// ------> how to access/change the this.$v.invalid value so that my button stays disabled ????
return errors;
}
}
},
methods: {
submit() {
// submit function
this.$v.$touch();
// do somethig after button is enabled
}
};
</script>