Vuejs Отправить форму с входными данными в дочерних компонентах

Question

У меня есть родительский компонент, который является компонентом формы, который имеет несколько дочерних компонентов, которые содержат поля ввода

<template>
    <div class="form">
        <generalData v-model="input" />
        <textAreas v-model="input"/>
        <button class="btn" @click="Submit()">Submit</button>
    <div/>
</template>

<script>
export default {
    data(){
        return {
            input: {
                name: '',
                age: '',
                address: ''
                bio: ''
            }
        }
    },
    methods: {
        Submit(){
            console.log('Submitting...');
            console.log(this.input);
        }
    }
}
</script>

, а дочерние компоненты содержат текстовые поля

<template>
    <div class="generalData">
        <input name="name" type="text" v-bind:value="input.name" v-on:input="updateInput($event.target.value)">
        <input name="age" type="text" v-bind:value="input.age" v-on:input="updateInput($event.target.value)">
    <div/>
</template>

<script>
export default {
    props: ['input'],
    data(){
        return {

        }
    },
    methods: {
        updateInput(value){
            this.$emit('input', value);
        }
    }
}
</script>

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

Answer 1

Попробуйте этот код:

<template>
    <div class="generalData">
        <input type="text" v-model="person.name" @change="handleChange" @input="handleInput">
        <input type="text" v-model="person.age" @change="handleChange" @input="handleInput">
        <input type="text" v-model="person.address" @change="handleChange" @input="handleInput">
        <input type="text" v-model="person.bio" @change="handleChange" @input="handleInput">
    <div/>
</template>

<script>
export default {
  props: ['value'],
  data () {
    return {
        person: {
            name: '',
            age: '',
            address: ''
            bio: ''
        }
    }
  },
  methods: {
    handleChange () {
        return this.$emit('change', this.person)
    },
    handleInput () {
        return this.$emit('input', this.person)
    },
    setCurrentValue (person) {
        this.person = person
    }
  },
  watch: {
    value (val) {
      if (!val) return
      this.setCurrentValue(val)
    }
  }
}
</script>

Answer 2

Другим способом решения этой проблемы является создание одного входного компонента, а затем итерация по объекту пользователя, передающему атрибут и имеющим v-model непосредственно на входе, связанном со значением.Если ваш пользовательский объект находится в вашем экземпляре корневого представления, вы можете получить доступ к данным, используя this.$root.whatEver

Проверьте эту скрипку https://jsfiddle.net/caseyjoneal/urgantzo/113/

Answer 3

Вы должны использовать опору, которую вы определили внутри вашего компонента.Вы назвали этот реквизит, затем:

<template>
    <div class="form">
        <generalData :input="input" />
        <textAreas :input="input" />
        <button class="btn" @click="submit">Submit</button>
    <div/>
</template>

<script>
export default {
    data(){
        return {
            input: {
                name: '',
                age: '',
                address: ''
                bio: ''
            }
        }
    },
    methods: {
        submit(){
            console.log('Submitting...');
            console.log(this.input);
        }
    }
}
</script>