Pass on the form data from one component to another

Question

I'm trying to get information from a form via button which is not part of the component where the form is present.

Basically the current structure looks like this:

->Component A (button is here) --> Inside component A I import another component (B) where the form is located

So I am trying to pass the information from component B, using button which is located in component A.

The reason why component B is not just part of component A (would make things relatively easier) is because it's used in several other places.

In component A I have:

    `<ComponentB></ComponentB>
    <div class="padding">
        <button @onSubmit="onSubmit" class="add-button btn btn-md float- 
        right" 
        type="submit">Add items from component B</button>
    </div>`

This is my data located in export default in component A

import ComponentB from './ComponentB'; import {mapActions} from 'vuex';

export default { name: "ComponentA", components:{ ComponentB }, data(){ return{ firstname: '', surname: '', dateOfBirth: '', isPolicyHolder: '', drivingLicence: licenceNumber: '', countryLicenced: '', coverEffectiveFrom: '', coverEffectiveTo: '', } }

I also have vuex state where I'm trying to pass the information to on button click.

In Component A this is the method:

    `methods:{
    ...mapActions(['addDriver']),
    onSubmit(e){
        e.preventDefault();
        this.addDriver( this.firstname, 
                        this.surname, 
                        this.dateOfBirth,
                        this.isPolicyHolder,
                        this.licenceNumber,
                        this.countryLicenced,
                        this.coverEffectiveFrom,
                        this.coverEffectiveTo)
    }
}`

Component B just hold few text boxes and date pickers.

So to summarise, on button click it should take whatever info is typed in component B to component A data.

carlosza carlosza · Accepted Answer · 2019-08-08T18:42:41

You have to create a Vuex state to manage the variables. And then, create the actions and mutates to modify the state. After that, you can just get what you want in component B.

const store = new Vuex.Store({
  state: {
    // your states
  },
  mutations: {
    // change state here sync
  },
  actions: {
    // call mutations here, but you can do this async as axios methods etc..
  },
  getters: {
    // need this only if state still needs some calculation.
  }
}

So after you create all this. You'll be able to call the actions like above

this.$store.dispatch('ACTION')

and get the state in component B

this.$store.state.stateYouWant

or with getters

this.$store.getters.getterYouCreated

Pass on the form data from one component to another

1 Answers