类星体表单验证未触发

Question

我在类星体中有一个表单，其中包含一些必填字段。当我单击submit时，表单不会触发验证，甚至不会将任何内容记录到控制台。我盯着它看了好几个小时，检查了文档和无数的教程，但还是不知道哪里出了问题。当我删除验证器时，表单提交得很好。我删除了所有不相关的逻辑，如查询等。

<template>
<q-card>
<q-card-section>
<div class="text-h6">Add New</div>
</q-card-section>
<q-separator />
<q-card-section style="max-height: 50vh" class="scroll">
<q-form
ref="form"
@submit="onSubmit"
@cancel="onCancel"
class="q-gutter-md"
greedy
>
<q-input
name="name"
lazy-rules
:rules="[(val) => (val && val.length > 0) || 'Please type something']"
v-model="input.name"
label="Name"
/>
<q-input
name="dob"
v-model="input.dob"
filled
type="date"
hint="Date of birth"
/>
<q-separator />
<div>
<q-btn flat label="Cancel" color="secondary" v-close-popup />
<q-btn type="submit" flat label="Add" color="primary" v-close-popup />
</div>
</q-form>
</q-card-section>
</q-card>
</template>
<script>
export default {
data() {
return {
input: {
name: null,
dob: null,
},
};
},
methods: {
async onSubmit() {
const success = await this.$refs.form.validate();
if (success) {
console.log("success");
} else {
console.log("fail");
}
},
},
};
</script>

另外，我在控制台得到以下错误:runtime-core.esm-bundler.js:38 [Vue warn]: Property "error"在渲染期间访问，但未在实例上定义。有什么办法吗?

Answer 1

我的表单没有验证，因为我把它放在一个对话框中。我在我的提交按钮上放置了一个@click，并删除了v-close-popup，只在提交时关闭弹出窗口。