Best way to collect data from multiple components into one in Vuejs

Question

I create a form in several steps. Here is my tree :

fullForm.vue
- firstStep.vue
- secondStep.vue
- thirdStep.vue

Each step has several fields that are stored in data().

// example for step 1

 data: () => ({
      model: {
        official_name: '',
        commmercial_name: '',
        status: '',
        status_other: '',
        …

Each step is an import component in parent component (fullForm.vue)

    <first-step ref="firstStep" @on-validate="onStepValidate"></first-step>
    <second-step ref="secondStep" @on-validate="onStepValidate"></second-step>
    <third-step ref="thirdStep" @on-validate="onStepValidate"></third-step>

I would like to combine the data of all my child components in my data formFull in fullForm.vue.

I tried this :

onStepValidate(validated, model) {
   if (validated) {
     this.formFull = { ...this.formFulll, ...model };
    }
 }

It works halfway.

When I complete step one and valid, formFull fills up with step 1.

When I validate step 2, it erases formFull and fills it only with step 2.

How to keep all the data? Thanks !

Try to use global observable API like [here](https://stackoverflow.com/questions/57710800/why-i-can-use-vuex/57712105#57712105) — Boussadjra Brahim, Sep 03 '19 at 13:42

score 1 · Accepted Answer · answered Sep 03 '19 at 15:16

1

You have a typo (3 ls):

this.formFull = { ...this.formFulll, ...model };

Try this:

this.formFull = { ...this.formFull, ...model };

answered Sep 03 '19 at 15:16

bernie

9,820
5
62
92

Best way to collect data from multiple components into one in Vuejs

1 Answers1