How to get input from multiple child components in Vuejs2?

Question

I'm using VueJs2. Component A consists of two components, B and C, and also contains a submit button. each of the child components have an input element. When A's submit button is clicked, I need to get input from B and C and submit them in a single post request.

"Component A"

var A = {
    components: {
        'B',
        'C',
    },
    template: `<input type="button" value="submit" id="submit" v-on:click="submitMethod" />`,
    methods: {
        submitMethod: function() {

        }
    }
}

"Component B"

var B = {
    template: `<input type="text" id="fname" v-model="fname" />`,
    data: {
        fname: ''
    }
}

"Component C"

var C = {
    template: `<input type="text" id="lname" v-model="lname" />`,
    data: {
        lname: ''
    }
}

How may I achieve this?

Did you get it to work? – Guilherme Ferreira Aug 28 '18 at 16:53 — Guilherme Ferreira, Aug 28 '18 at 16:53

score 0 · Answer 1 · answered Dec 28 '17 at 08:17

I understand your concern. These questions are not very well answered in the Vue community. If you are coming from React, there is, of course, some learning curve but you get to know all the best practices first hand.

In React, in this case Vue, In my component A, I will have state(data) for both the input in B and C. Then in my template I would do somethign like this.

<div>
  <A :value="aValue" onChange="(value) => aValue = value"/>
  <B :value="bValue" onChange="(value) => bValue = value"/>
  <input type="button" value="submit" @click="myFucntion"/>
</div>

So now you have all the data in the top level(container) component. This will allow most of our component to be stateless and reusable. I understand this is a little verbose, but I think it is worth it.

score 0 · Answer 2 · answered Dec 28 '17 at 08:18

You can use Event driven approach. this will be more elegant way to pass data from child to parent.

Vue.component('child', {
  template: '#child',
  
  //The child has a prop named 'value'. v-model will automatically bind to this prop
  props: ['value'],
  data: function() {
    return {
      internalValue: ''
    }
  },
  watch: {
    'internalValue': function() {
      // When the internal value changes, we $emit an event. Because this event is 
      // named 'input', v-model will automatically update the parent value
      this.$emit('input', this.internalValue);
    }
  },
  created: function() {
    // We initially sync the internalValue with the value passed in by the parent
    this.internalValue = this.value;
  }
});

new Vue({
  el: '#app',
  data: {
    inputs: {    
      value1: 'hello1',
      value2: 'hello2'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>

<div id="app">
  <p>Parent value: {{inputs}}</p>
  <child v-model="inputs.value1"></child>
  <child v-model="inputs.value2"></child>
</div>

<template id="child">
   <input type="text" v-model="internalValue">
</template>

reference taken from here : vuejs update parent data from child component author :

How to get input from multiple child components in Vuejs2?

2 Answers2