Vuelidate: проверка формы с подкомпонентами

Question

Как работать с проверками вложенных компонентов внутри родительского компонента с Vuelidate? Я хотел бы изменить parentForm.$invalid если входные данные в подкомпонентах действительны или нет.

родитель:

<parent-component>
  </child-component-1>
  </child-component-2>
</parent-component>

validations: {
  parent: WHAT HERE?
}

Ребенок-1

<child-component-1>
  </some-input>
</child-component-1>

data() {
  return {
    someInput: ""
  };
},

validations: {
  someInput: required
}

Ребенок-2

<child-component-2>
  </some-input>
</child-component-2>

data() {
  return {
    someInput: ""
  };
},

validations: {
  someInput: required
}

Answer 1

Самый простой способ начать работу с vuelidate для подкомпонентов / форм - это использовать механизм внедрения зависимостей Vue.js, предоставляемый provide/inject пара. $v Экземпляр, созданный в родительском компоненте, может использоваться совместно с дочерним компонентом.

Для более точной настройки вы можете использовать вложенность данных Vuelidate и передавать только подмножество $v вашим подкомпонентам. Это примерно такой же подход, как в Angular для вложенных форм. Это будет выглядеть примерно так:

export default {
    data() {
        return {
            form1: {
                nestedA: '',
                nestedB: ''
            } /* Remaining fields */
        }
    },
    validations: {
        form1: {
            nestedA: {
                required
            },
            nestedB: {
                required
            }
        },

        form2: {
            nestedA: {
                required
            },
            nestedB: {
                required
            }
        }
    }
}

Кроме того, вы можете объявить независимые экземпляры $v для каждого компонента. В вашем случае у вас будет один для родителей и два для детей. Когда вы нажмете кнопку отправки, получите ссылку на дочерний компонент, используя $refs и проверьте правильность вложенной формы в дочернем компоненте.

Answer 2

Возможно, я не эксперт по Vue. Если вы объявили проверки в дочернем компоненте и хотите получить к нему доступ из родительского компонента, вы можете использовать ссылку на дочерний компонент из родительского компонента таким образом.

В родительском компоненте это будет похоже на

<template>
<my-child ref="mychild"> </my-child>
</template>

Вы можете получить доступ к проверкам, объявленным в компоненте my-child, который является объектом $v, используя

this.$refs.mychild.$v

а затем вы можете с легкостью использовать проверки дочернего компонента в родительских компонентах. Надеюсь, это упростит работу, чем использование сложных способов, и это сработало для меня.