The validation messages are correctly displayed when the rules function as expected. The button's disabled state is determined by the value of this.valid, which changes depending on the outcome of the checkTextBoxValidation method called upon each input in the myForm ref. However, an error occurs during the validation attempt, causing this.valid to remain unchanged.
checkTextBoxValidation() {
console.log('check v-text-box validation');
this.valid = !!(this.$refs.myForm as Vue & {
validate: () => Promise<boolean>
}).validate();
console.log('valid:', this.valid);
},
<v-form ref='myForm' @submit.prevent='submit(idx, fpIdx)'>
<v-row>
<v-col sm='7'>
<v-text-field label='Enter Value'
v-model='subHeader.updateAmount'
:rules='[...rules.currencyValue, ...rules.required]'
required
@input='checkTextBoxValidation'
></v-text-field>
</v-col>
<v-col sm='5' class='mt-2'>
<v-btn rounded
color='primary'
type='submit'
:disabled='!valid'
>{{ SUBMIT_LABEL }}
</v-btn>
</v-col>
</v-row>
</v-form>
I've also attempted
this.valid = (this.$refs.myForm as HTMLFormElement).checkValidity();