vee验证提交时的无模型验证不起作用

Question

这看起来很简单，但我无法让它工作。。。

如果仅在单击"验证"按钮时设置了文件，我希望进行验证。但是check方法中的验证结果总是返回false。

<template>
<ValidationObserver>
<form @submit.prevent>
<ValidationProvider
ref="aProvider"
name="file"
rules="required"
v-slot="{ errors }"
>
<input type="file" />
<p>{{ errors[0] }}</p>
</ValidationProvider>
<button @click="check">validate!</button>
</form>
</ValidationObserver>
</template>
<script>
export default {
methods: {
async check() {
const { valid } = await this.$refs.aProvider.validate();
if (valid) {
alert("Form has been submitted!");
}
},
},
};
</script>

代码沙箱https://codesandbox.io/s/codesandbox-forked-6o7iyt?file=/src/Demo.vue

Answer 1

validate()方法适用于观察者，而不是文档中指定的提供程序：https://vee-validate.logaretm.com/v2/guide/components/validation-observer.html#methods

只需在您的Observer上设置一个ref并运行该方法。

<template>
<ValidationObserver ref="form">
<form @submit.prevent>
<ValidationProvider
name="file"
rules="required"
v-slot="{ errors }"
>
<input type="file" />
<p>{{ errors[0] }}</p>
</ValidationProvider>
<button @click="check">validate!</button>
</form>
</ValidationObserver>
</template>
<script>
export default {
methods: {
async check() {
const { valid } = await this.$refs.form.validate();
if (valid) {
alert("Form has been submitted!");
}
},
},
};
</script>

Answer 2

创建一个数据属性并通过v-model将其绑定到输入。将引用移到ValidationObserver。然后它将正确验证。