VeeValidate 4 无需提交按钮即可验证

Question

我正试图全神贯注于 VeeValidate 4，但它与之前的版本有很大不同，所以我运行遇到了很多问号和障碍。我使用 Vue 3 应用程序，使用组合 API，有几种不同的形式 components/views。有一个“下一页”按钮可以将您带到下一个视图，但是由于该按钮与表单完全分开，所以我没有任何 handleSubmit 连接到表单。相反，如果当前表单有效或无效，我想将其保持在该状态，并通过这种方式确定是否允许用户转到下一页。

我想完成但不确定是否可以完成的是能够在字段验证发生时“挂钩”，并且如果所有表单字段都有效则以这种方式保存到状态.我已经多次查看文档，但我无法弄清楚。如果有任何帮助、提示或想法，我将不胜感激。

这是我的一个Vue的简化版components/views:

<template>
    <form>
        <CustomInput v-model="name" inputType="text" name="name" />
        <div v-if="nameErrors.length">{{ nameErrors[0] }}</div>

        <CustomInput v-model="width" inputType="text" name="width" />
        <div v-if="widthErrors.length">{{ widthErrors[0] }}</div>
    </form>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useField } from 'vee-validate';
import CustomInput from 'CustomInput.vue';

export default defineComponent({
    name: 'View',
    components: {
        CustomInput,
    },
    setup() {
        const { value: name, errors: nameErrors } = useField('name', 'required');
        const { value: width, errors: widthErrors } = useField('width', 'required|numeric|boatWidth');

        return {
            name,
            width,
            nameErrors,
            widthErrors,
        };
    },
});
</script>

组件层次结构：

LayoutComponent
    FormComponent (which component depends on what step the user is on)
    NextButtonComponent

Answer 1

您应该使用 useForm 函数来访问表单状态。您可以为此使用 inject/provide：

// in parent component
const { meta, errors } = useForm();

provide('form_meta', meta);
provide('form_errors', errors);

然后在你的子组件中你可以注入这些属性：

const formMeta = inject('form_meta');
const formErrors = inject('form_errors');

VeeValidate 4 无需提交按钮即可验证

VeeValidate 4 validate without submit button

typescript

vue.js

vee-validate

vuejs3

vue-composition-api