英文:
this.$refs.myForm.validate is not a function in my vue component
问题
以下是您要翻译的内容：
"The rules work and display the correct validation messages.
The button is disabled when this.valid is false.
The checkTextBoxValidation method is called with every input to check validation in the myForm ref.
and once it tries to validate I get the error in the title. therefore this.valid doesn't change."
"规则有效，并显示正确的验证消息。
当this.valid为false时，按钮被禁用。
checkTextBoxValidation方法在每次输入时都会调用，以检查myForm引用中的验证。
一旦尝试验证，我就会得到标题中的错误。因此，this.valid不会更改。"
"this.valid = (this.$refs.myForm as HTMLFormElement).checkValidity();"
"this.$refs.myForm.checkValidity is not a function"
英文:
The rules work and display the correct validation messages.
The button is disabled when this.valid is false.
The checkTextBoxValidation method is called with every input to check validation in the myForm ref.
and once it tries to validate I get the error in the title. therefore this.valid doesn't change.
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 tried
this.valid = (this.$refs.myForm as HTMLFormElement).checkValidity();
and get
this.$refs.myForm.checkValidity is not a function
答案1
得分: 2
以下是您要翻译的内容：
"当我将您的代码放入playground，它可以正常工作，所以我猜您的错误可能发生在其他地方。您是否在组件挂载之前从其他地方运行该函数？
请注意，.verify() 返回一个Promise，因此 !!this.$refs.myForm.validate() 将始终为true（因为Promise不是假值）。
总的来说，您可能最好只绑定到VForm的modelValue：
<v-form @update:modelValue="isValid => valid = isValid || isValid === null">
（请注意，如果表单有效但尚未发生validate-on事件，则从update返回的值将为null）
英文:
It works when I put your code into a playground, so my guess is that your error happens somewhere else. Are you running the function from somewhere else before the component is mounted?
Note that .verify() returns a promise, so !!this.$refs.myForm.validate() will always be true (since the promise it not a falsy value).
All in all, you might be better of by just binding to the modelValue of VForm:
<v-form @update:modelValue="isValid => valid = isValid || isValid === null">
(note that the value returned from update will be null if the form is valid but the validate-on event has not happened yet)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论