Проверка VeeValidate 4 без кнопки отправки

Я пытаюсь осмыслить VeeValidate 4, но он сильно отличается от предыдущей версии, поэтому я сталкиваюсь с множеством вопросительных знаков и препятствий. Я работаю с приложением Vue 3, используя API композиции, с несколькими формами в разных компонентах / представлениях. Существует кнопка «Следующая страница», которая переводит вас к следующему представлению, но поскольку эта кнопка полностью отделена от форм, у меня нет никакого handleSubmit, подключенного к формам. Вместо этого я хочу сохранить его в состоянии, является ли текущая форма действительной или нет, и таким образом определить, разрешено ли пользователю перейти на следующую страницу.

То, что я хотел бы сделать, но не уверен, смогу ли я, - это иметь возможность подключаться, когда происходят проверки полей, и таким образом сохранять состояние, если все поля формы действительны или нет. Я много раз просматривал документацию, но не могу понять. Буду очень признателен за любую помощь, советы или мысли.

Это упрощенная версия одного из моих компонентов / представлений Vue:

<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>

Component hiearchy:

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

typescript vue.js vuejs3 vue-composition-api vee-validate
person Phoebe    schedule 19.11.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны использовать функцию 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');
person logaretm    schedule 22.11.2020
comment
Как это работает, если форма не находится в родительском элементе? Мне удалось получить доступ к состоянию формы в дочернем компоненте, где находится моя форма (как в моем примере выше). Это может сработать достаточно для того, что мне нужно. Я могу смотреть мета и отслеживать, действительна ли моя форма, и сохранять ее в своем состоянии. Это может сработать даже лучше, поскольку мой родительский компонент, скорее всего, будет иметь разные формы в разных компонентах. - person Phoebe; 03.12.2020
comment
Мне любопытно, как передать дочернее состояние родителю с помощью provide и inject. Я попробовал, и родительская мета не обновлялась в соответствии с формой в дочернем компоненте. Нужно ли дочернему элементу испускать или что-то подобное, чтобы у родителя было актуальное состояние формы? Если мой вопрос имеет смысл. :) - person Phoebe; 03.12.2020
comment
На данный момент я не уверен, зачем вам нужно, чтобы состояние формы двигалось вверх по дереву, а не вниз. Я работаю над некоторыми улучшениями в PR, но опять же, это касается передачи состояния формы дочерним компонентам. Для родителей вы можете использовать emit или $refs. - person logaretm; 09.12.2020
comment
Моя проблема в том, что мое приложение Vue (которое состоит из разных шагов) имеет компонент макета, который отображает различные компоненты, в которых есть формы, но имеет только одну кнопку отправки / следующего. Я отредактировал свой исходный пост с иерархией. Я думал, что способ решить эту проблему - узнать состояние формы дочернего компонента в Layout.vue, родительском, а затем сказать кнопке, чтобы она действовала соответствующим образом. Но, возможно, я неправильно подхожу к этому. - person Phoebe; 15.12.2020
comment
вы можете использовать provide/inject для отправки данных обратно родителю, что должно работать лучше, чем события. Эта проблема имеет аналогичные потребности github.com/logaretm/vee-validate/issues/2915 - person logaretm; 16.12.2020