how to send input data value from child component data object to parent?

Question

I am trying to send input data variables from child component form to parent component through dataobject 'data()'. I have seen vuejs update parent data from child component article and tried to do it but, i am unable to $emit captured dataobject through an event. can you please help me out.

Parent component:

<script>
    import inputform from '../components/form.vue';
    import axios from 'axios';

  export default {
      name: 'helloword',
      data() {
          return {
          }
      },
    components: {
        inputform
    },
      methods: {
          submit() {
                const path = 'http://127.0.0.1:5000';
                axios.post(path, {
                    name: inputform.data()

                })
              .then(() => {
                  const result = 'Sucess!';
                  console.log(result);
              })
              .catch((error) => {
                  console.log(error);
              })
          }
      }
  }
</script>

Child component:

<template>
    <div>
  <table>
    <thead>
    <th>Name</th>
    <th>Email</th>
    <th>Age</th>
    </thead>
    <tr>
      <td><input type="text" id="name" v-model="details.name" @focusout="inputdata"></td>
      <td><input type="text" id="name1" v-model="details.name1" @focusout="inputdata" ></td>
      <td><input type="number" id="age" v-model="details.age" @focusout="inputdata" ></td>

    </tr>
  </table>
    </div>
</template>

<script>
    export default {
        name: "inputform",
      data() {
          return {
            details: {
            name: '',
            name1: '',
            age: ''
              }
          }
      },
      methods: {
            inputdata() {
              this.$emit("input_data", this.details)
            }
      }
    }
</script>

<style scoped>

</style>

So, looking for help with emitting variable data from child compnent to parent and perform submit operation to API using axios from parent component. If there is any other better way please let me know. Thanks.

score 0 · Answer 1 · edited Jul 15 '22 at 04:35

well first you should pass max two params to $emit method here's the docs: https://v2.vuejs.org/v2/api/#vm-emit and second is the v-on: before v-models is extra. so the solution you can pass this data in one object instead of three data so the code will be like this:


      data() {
          return {
            name: '',
            email: '',
            age: '',
          }
      },
      methods: {
            inputdata() {
              this.$emit("input", {
                name: this.name, 
                email: this.email, 
                age: this.age
              })
            }
      }

or my prefer option put all in a form data like this

<template>
    <div>
  <table>
    <thead>
    <th>Name</th>
    <th>Email</th>
    <th>Age</th>
    </thead>
    <tr>
      <td><input type="text" id="name" v-model="form.name"></td>
      <td><input type="email" id="email" v-model="form.email"></td>
      <td><input type="number" id="age" v-model="form.age"></td>
    </tr>
  </table>
    </div>
</template>

<script>
    export default {
        name: "inputform",
      data() {
          return {
            form: {
              name: '',
              email: '',
              age: '',
            }
          }
      },
      methods: {
            inputdata() {
              this.$emit("input", this.form)
            }
      }
    }
</script>

Hi, how do i use "inputdata()" function in the child component ? i know, i haven't used the function to capture the event. con provide more details ? — sahith gangarapu, Jun 21 '20 at 16:42
you need to access form data in parent but you dont need to call inputdata() in parent component. instead you set a watcher on form data and every time it change call inputdata() method automatically in child. — TEFO, Jun 21 '20 at 17:15

score 0 · Accepted Answer · answered Jun 21 '20 at 16:13

When attaching a v-model you don't need a v-on. You could also look to capture details into a single object like so and then pass it as part of the event emitted.

Child component

<template>
  <div>
    <table>
      <thead>
        <th>Name</th>
        <th>Email</th>
        <th>Age</th>
      </thead>
      <tr>
        <td>
          <input type="text" id="name" v-model="details.name">
        </td>
        <td>
          <input type="email" id="email" v-model="details.email">
        </td>
        <td>
          <input type="number" id="age" v-model="details.age">
        </td>
        <td>
          <button @click="inputdata">Submit</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "inputform",
  data() {
    return {
      details: {
        name: "",
        email: "",
        age: ""
      }
    };
  },
  methods: {
    inputdata() {
      console.log(this.details);
      this.$emit("handledata", this.details);
    }
  }
};
</script>

Parent component

<template>
  <div id="app">
    <HelloWorld v-on:handledata="handleInput"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  methods: {
    handleInput(data) {
      // object emitted from the child component
      console.log({ data });
    }
  }
};
</script>

thanks, that worked but i dont want to use my submit button in child component. because, i have other components that i should pass data to parent, how to fix it by placing submit button on parent ? let say i am using view file as parent. — sahith gangarapu, Jun 21 '20 at 16:43
You have added submit button in child component. But what if it is on parent ? — sahith gangarapu, Jun 21 '20 at 19:05
You will need some trigger to send the data back from the child to the parent, it's `submit` in my case, could be anything else in your case - the parent won't pick the data automatically. You could also look to use vuex. — painotpi, Jun 21 '20 at 19:08

how to send input data value from child component data object to parent?

2 Answers2