Как связаться / проверить компонент внутри формы в vuejs?

Question

У меня есть форма, которая содержит компоненты имени и адреса.На странице родителей у меня есть кнопка отправки.Я могу отправить данные от родителей детям с помощью реквизита.Сейчас я пытаюсь получить ценности детей из родительской формы.И я хочу проверить дочерние поля из формы родителя.Как это сделать?

Вот моя структура формы.

parent.vue

<form @submit.prevent="handleSubmit">
    <name-fields :user='user'></name-fields>
    <address-fields :address='address'></address-fields>

    <button>Register</button>
</form>

<script>
export default {
    data () {
        return {
            user: {
                firstName: 'Raja',
                lastName: 'Roja',
            },
            address: {
                doorNo: '11',
                state: 'KL',
                country: 'IN',
            },
            submitted: false
        }
    },
    components: {
        'name-fields': cNameFields,    
        'address-fields': cAddressFields,
    },
}
</script>

cNameFields.vue

<template>
  <div>
      <div class="form-group">
        <label for="firstName">First Name</label>
        <input type="text" v-model="user.firstName" v-validate="'required'" name="firstName" class="form-control" :class="{ 'is-invalid': submitted && errors.has('firstName') }" />
        <div v-if="submitted && errors.has('firstName')" class="invalid-feedback">{{ errors.first('firstName') }}</div>
    </div>
    <div class="form-group">
        <label for="lastName">Last Name</label>
        <input type="text" v-model="user.lastName" v-validate="'required'" name="lastName" class="form-control" :class="{ 'is-invalid': submitted && errors.has('lastName') }" />
        <div v-if="submitted && errors.has('lastName')" class="invalid-feedback">{{ errors.first('lastName') }}</div>
    </div> 
    </div>
</template>

<script>
export default {
  name: 'name',
  props: {
            user: Object,
            submitted : Boolean
        },
</script>

В настоящее время получаю этовывод:

Что я хочу сделать:

Answer 1

Вы передаете своим детям объекты в качестве реквизита, которые передаются по ссылке в JavaScript.Из Vue docs ..

Обратите внимание, что объекты и массивы в JavaScript передаются по ссылке, поэтому, если свойство является массивом или объектом, мутирует объект или сам массив внутридочерний компонент будет влиять на родительское состояние.

Это означает, что вы уже получаете дочерние значения в родительском элементе и можете получить к ним доступ в родительском элементе через this.user.firstName,this.user.lastName, this.address.doorNo и т. Д. Если это нежелательное поведение, и вы хотите сохранить данные своих родителей изолированными, вам следует изучить глубокое клонирование объектов .

ЕслиВы хотите, чтобы ваши ошибки валидации ваших дочерних компонентов были доступны родительскому элементу, который вы можете просмотреть в Слотах с ограничениями .Так что вы можете сделать что-то вроде этого ..

parent.vue

<form @submit.prevent="handleSubmit">
    <name-fields :user='user'>
        <span slot="firstName" slot-scope="{validationErrors}" style="color:red">
            {{validationErrors.first('firstName')}}
        </span>
        <span slot="lastName" slot-scope="{validationErrors}" style="color:red">
            {{validationErrors.first('lastName')}}
        </span>
    </name-fields>

    <address-fields :address='address'>
        <span slot="doorNo" slot-scope="{validationErrors}" style="color:red">
            {{validationErrors.first('doorNo')}}
        </span>
        <span slot="state" slot-scope="{validationErrors}" style="color:red">
            {{validationErrors.first('state')}}
        </span>
        <span slot="country" slot-scope="{validationErrors}" style="color:red">
            {{validationErrors.first('country')}}
        </span>
    </address-fields>

    <button>Register</button>
</form>

cNameFields.vue

<template>
    <div>
        <div class="form-group">
            <label for="firstName">First Name</label>
            <input type="text" v-model="user.firstName" v-validate="'required'" name="firstName" class="form-control" :class="{ 'is-invalid': submitted && errors.has('firstName') }" />
            <slot name="firstName" :validationErrors="errors"></slot>
        </div>
        <div class="form-group">
            <label for="lastName">Last Name</label>
            <input type="text" v-model="user.lastName" v-validate="'required'" name="lastName" class="form-control" :class="{ 'is-invalid': submitted && errors.has('lastName') }" />
            <slot name="lastName" :validationErrors="errors"></slot>
        </div> 
    </div>
</template>

Это отличное видео это объясняет, как работают слоты с областью действия.

Answer 2

Используйте это. $ Emit https://vuejs.org/v2/api/#vm-emit, а также используйте watch https://vuejs.org/v2/api/#vm-watch

Так что в дочернем компоненте вы должны следить за изменениями в user.firstName и user.lastName.Вызовите emit in watch и получите значение в parent.Не забудьте также выбросить сумку this.errors от vee-validate.

Надеюсь, это поможет вам:)