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

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

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

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>

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

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

Чем я хочу заниматься:


vue.js vuejs2 vue-component vee-validate
person bCliks    schedule 11.10.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Поэтому в дочернем компоненте вы должны следить за изменениями в user.firstName и user.lastName. Вызовите emit в часах и получите значение в родительском. Не забудьте также создать пакет this.errors, полученный от vee-validate.

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

person Indra Kusuma    schedule 11.10.2018
comment
И как бы вы объединили проверку дочернего элемента с родительским? - person brad; 20.02.2019

arrow_upward
1
arrow_downward

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

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

Это означает, что вы уже получаете дочерние значения в родительском элементе, и вы можете получить к ним доступ в родительском элементе через _1 _, _ 2_, 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>

Это отличное видео, в котором объясняется, как рекламные места Работа.

person Husam Ibrahim    schedule 11.10.2018