Multiple child values in parent

Question

I currently have a parent component that has 2 children.

Both the children are simple <input> fields

In my parent, I have a button (this a form afterall), when click, I'd like to get the values of both children in my parent, so I can send it to an API endpoint.

Whats the easiest way?

I've seen props and $emit but not sure which is the best approach

Thanks

EDIT:

My parent looks like following:

<template>
  <div>
    <name-filter></name-filter>
    <report-type-filter></report-type-filter>
    <button @click="sumbmitForm()">Submit</button>
  </div>
</template>

<script>
  import NameFilter from './filters/NameFilter.vue';
  import ReportTypeFilter from './filters/ReportTypeFilter.vue';

  export default{
    components: {
        NameFilter,
        ReportTypeFilter
    },
    data() {
        return {
            name: "",
            type: ""
        };
    },

    methods: {
        sumbmitForm() {
            // I'd like to get the <input> values here
        }
    }
  }
</script>

Possible duplicate of [Modify props.value from within child component](https://stackoverflow.com/questions/48575226/modify-props-value-from-within-child-component) — zero298, Jun 26 '18 at 17:10

score 0 · Accepted Answer · answered Jun 26 '18 at 20:27

I don't know what you want exactly so i'm assuming that your code looks like this:

<form>
     <input>
     <input>
     <button>
</form>

If that's the case, then you can use v-model on both inputs to get their values like this:

<form>
    <input v-model="input1">
    <input v-model="input2">
    <button>
</form>

Then, define those two variable inside your data:

data() {
     return {
          input1: '',
          input2: '',
     }
}

This will give you the ability to get their values like this: this.input1 and this.input2

Multiple child values in parent

1 Answers1