3
votes

Vuejs Soumettre le formulaire avec des entrées dans les composants enfants

J'ai un composant parent qui est un composant de formulaire qui a plusieurs composants enfants qui contiennent des champs d'entrée

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

et les composants enfants contiennent les champs de texte

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

javascript vue.js vuejs2

0 commentaires

3 Réponses :

0
votes

Vous devez utiliser le prop que vous avez défini à l'intérieur de votre composant. Vous avez nommé cette entrée prop, puis:

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

0 commentaires

2
votes

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

0 commentaires

0
votes

Une autre façon d'aborder cela serait de créer un composant d'entrée, puis d'itérer sur l'objet utilisateur en passant un attribut et en ayant v-model directement sur l'entrée liée à la valeur. Si votre objet utilisateur se trouve dans votre instance de vue racine, vous pouvez accéder aux données en utilisant this. $ Root.whatEver

Découvrez ce violon https://jsfiddle.net/caseyjoneal/urgantzo/113/

0 commentaires