Vue.js提交带有子组件输入的表单

Question

I have a parent component that is a form component that has multiple child components that contain input fields

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

and the child components contain the text fields

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

same for the other child component but the values are not getting updated and i am not able to submit them

Answer 1

You have to use prop that you defined inside of your component. You named that prop input, then:

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

Answer 2

Try this code:

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

Another way to approach this would be to make one input component and then iterate over the user object passing in an attribute and having v-model directly on the input bound to the value. If your user object is in your root view instance you can access data using the this.$root.whatEver

Check out this fiddle https://jsfiddle.net/caseyjoneal/urgantzo/113/