Skip to content
Advertisement

Vue.js pass form data (v-model) values from Parent to Child?

I have a two component form using vue.js where the parent form starts the multistep process and collects two inputs using v-model and if these are valid values the form moves to the next component of the form using a child component. What I would like to do is take the parent 2 values and append them to the child component formData object for submission. Is there a way to pass the values to the child component? I’m assuming props but not sure how to just pass values and not $emit a function.

Parent:

 <div class="row--flex">
            <input type="text" class="form-input text-input center-margin" name="deductibleCardId" id="deductibleCardId" v-model="$v.formData.deductibleCardId.$model" />
  
       <input type="text" class="form-input text-input center-margin" name="savingsCardId" id="savingsCardId" v-model="$v.formData.savingsCardId.$model" />
        </div>

//child component call
 <GetCard v-if="showDemographics" :is-sub-form="true" @submit="submitDemographics" />

 data() {
    return {
      formData: {
        hasCard: null,
        deductibleCardId: null,
        savingsCardId: null
      }
  }

Child Component form data:

const formData = new FormData()

        formData.append('method', 'activate')

        (have these two values be brought over from parent values)

        formData.append('card_hd', this.formData.deductibleCardId)
        formData.append('card', this.formData.savingsCardId)

Advertisement

Answer

Yes, Props are what you want. Something like this, assuming your two values are deductibleCardId and savingsCardId and are both String type:

Parent Component:

<GetCard :deductibleCardId='deductibleCardId' :savingsCardId='savingsCardId'>

Child Component:

props: {
  deductibleCardId: String,
  savingsCardId: String,
}

From here, you can do whatever you want with these values in your child component using this.deductibleCardId and this.savingsCardId. For example, you can append them to your formData:

formData.append('card_hd', this.deductibleCardId);
formData.append('card', this.savingsCardId);

You do not need to emit anything to pass this data from parent to child. In order to pass something back “up” to the parent, you would need to use emit or communicate the data using some other strategy available in the Vue ecosystem.

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement