Vuejs 자 컴포넌트 입력과 함께 폼 제출

Vuejs 자 컴포넌트 입력과 함께 폼 제출

입력 필드를 포함하는 자식 구성 요소가 여러 개인 양식 구성 요소인 상위 구성 요소가 있습니다.

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

다른 아이 컴포넌트에 대해서도 동일하지만 값이 갱신되지 않아 전송할 수 없습니다.

다음 코드를 사용해 보십시오.

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

컴포넌트 내부에서 정의한 소품을 사용해야 합니다.소품 입력에 이름을 붙였습니다.

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

다른 방법은 입력 컴포넌트를 1개 만들고 사용자 오브젝트에 Atribute를 전달하여 이 컴포넌트를 반복하는 것입니다.v-model값에 바인드된 입력에 직접 액세스합니다.사용자 개체가 루트 뷰 인스턴스에 있는 경우this.$root.whatEver

이 바이올린을 확인해 주세요.https://jsfiddle.net/caseyjoneal/urgantzo/113/

언급URL : https://stackoverflow.com/questions/54495933/vuejs-submit-form-with-inputs-in-child-components