In my Vuejs application, I've implemented a wizard-type flow with dynamically loaded components. The parent component contains the Save button, while the child components have all the text fields. Upon clicking the Save button, I need to achieve two main tasks:
1) Load the next component (working currently) 2) Extract data from the text field(s) within the child component and store them in Vuex.
Below is the code snippet for the parent component:
<template>
<div>
<component :is="selectedComponent"></component>
<span @click="changeComponent(selectedComponent)" class="action button save">Save</span>
</div>
</template>
<script>
import auth from '@/api//auth'
import Establishment from '@/onboarding/components/OnboardingEstablishment.vue'
import Account from '@/onboarding/components/OnboardingAccount.vue'
import Vendor from '@/onboarding/components/OnboardingVendors.vue'
import Location from '@/onboarding/components/OnboardingLocation.vue'
import Menu from '@/onboarding/components/OnboardingMenu.vue'
export default {
data () {
return {
accountName: '',
selectedComponent: 'account'
}
},
components: {
establishment: Establishment,
account: Account,
vendor: Vendor,
location: Location,
appMenu: Menu
},
methods: {
changeComponent (current) {
const componentFlow = {
account: 'establishment',
establishment: 'location',
location: 'vendor',
vendor: 'appMenu'
}
var nextComponent = componentFlow[current]
this.selectedComponent = nextComponent
},
updateState () {
// Write the data from the element to the state.
}
},
mounted () {
auth.getAccountDetails()
.then(response => {
this.accountName = response.data.email
})
}
}
</script>
As an illustration, here is OnboardingAccount.vue, one of the dynamically loaded components:
<template>
<div>
<h1>Hey {{ accountEmail }}</h1>
<p>Let's start at the top.</p>
<p>What do you want to name your Account?</p>
<input :value="accountName" type="text" />
<p>Note: Your account name is the top level of your management. Additional teams or establishments can be added under this account name.</p>
</div>
</template>
<script>
import auth from '@/api/auth'
import Establishment from '@/onboarding/components/OnboardingEstablishment.vue'
import Account from '@/onboarding/components/OnboardingAccount.vue'
import Vendor from '@/onboarding/components/OnboardingVendors.vue'
import Location from '@/onboarding/components/OnboardingLocation.vue'
export default {
data () {
return {
accountEmail: '',
accountName: ''
}
},
components: {
establishment: Establishment,
account: Account,
vendor: Vendor,
location: Location
},
mounted () {
auth.getAccountDetails()
.then(response => {
this.accountEmail = response.data.email
})
}
}
</script>
The challenge I am facing is accessing the value from the OnboardingAccount component when clicking the Save button in the parent Onboarding component to write the data to the Vuex store. Any insights on how I can accomplish this task would be greatly appreciated.