如何在 Vee Validate 4 中正确使用组合 API 和自定义字段

Question

在阅读了 Vee Validate 4 的关于使用组合 api 和自定义输入的文档后，我是否正确理解挂钩 useField a 必须仅在输入组件内部调用（在我的示例中是 VInput.vue）？有什么方法可以在父组件中使用挂钩功能吗？ VInput 用于另一个不需要验证的功能，因此它将是额外的功能，为项目中的全局组件添加 useForm 例如我有 List.vue

<template>
 <form class="shadow-lg p-3 mb-5 bg-white rounded" @submit.prevent="submitPostForm">
        <VFormGroup label="Title" :error="titleError">
            <VInput v-model="postTitle" type="text" name="title" />
        </VFormGroup>
        <VFormGroup label="Body" :error="bodyError">
            <VInput v-model="postBody" type="text" name="body" />
        </VFormGroup>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</template>

<script>
import { ref, onMounted } from 'vue';
import { Form, useForm, useField } from 'vee-validate';
import * as Yup from 'yup';

export default {
    components: { Form },

    setup() {    
        const schema = Yup.object().shape({
           title: Yup.string().required(),
           body: Yup.string().min(6).required(),
        });

       //hooks
       const { handleSubmit } = useForm({ validationSchema: schema });

       // No need to define rules for fields because of schema
       const { value: postTitle, errorMessage: titleError } = useField('title');
       const { value: postBody, errorMessage: bodyError } = useField('body');

        //methods
        const submitPostForm = handleSubmit(() => {
         addPost({ title: postTitle, body: postBody });
        });

        return { schema, postTitle, postBody,  titleError, bodyError, submitPostForm };
    },
};
</script>

输入错误的问题我只能在VFormGroup中显示，我该如何管理这个表单？

Answer 1

我不确定是否正确理解了你的问题。但在你的情况下，你只有 1 个问题，你在一个文件中解构了 errorMessage 和 value 两次，这是行不通的。

您可以像这样更改您的 useField：

const { errorMessage: titleError, value: titleValue } = useField('title', Yup.string().required());
const { errorMessage: bodyError, value: bodyValue } = useField('body', Yup.string().required().min(8));

在您的 template 中，您想在 VFormGroup 中使用 titleError 和 bodyError。在您的 VInput 中，您想对 v-model

使用 titleValue 和 bodyValue

因为您在 setup() 中初始化了 title 和 body 我猜想它们没有任何预定义值。如果是这种情况，您可能想查看 useField() 的选项，您可以在其中将 thridParam 作为对象，例如initialValue 为 key，这就是你的 post.value.title。但是对于您的用例，我不推荐这样做。

回答评论中的代码问题：

<template>
 <form class="shadow-lg p-3 mb-5 bg-white rounded" @submit="handleSubmit">
        <VFormGroup label="Title" :error="titleError">
            <VInput v-model="titleValue" type="text" name="title" />
        </VFormGroup>
        <VFormGroup label="Body" :error="bodyError">
            <VInput v-model="bodyValue" type="text" name="body" />
        </VFormGroup>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</template>

<script>
import { ref } from 'vue';
import { Form, useForm, useField } from 'vee-validate';
import * as Yup from 'yup';

export default {
    components: { Form },
    setup() {    
        const title = ref('');
        const body = ref('');

       //hooks
       const { handleSubmit } = useForm();

       // No need to define rules for fields because of schema
       const { errorMessage: titleError, value: titleValue } = useField('title', Yup.string().required());
       const { errorMessage: bodyError, value: bodyValue } = useField('body', Yup.string().required().min(8));

        return { titleError, bodyError, titleValue, bodyValue, handleSubmit };
    },
};
</script>

如何在 Vee Validate 4 中正确使用组合 API 和自定义字段

How to use composition API with custom field in Vee Validate 4 correctly

vue.js

vee-validate

vue-composition-api