state.js:
export default () => ({
stepBarItems: [
{
title: 'Introductory Details',
active: false,
current: false
},
{
title: 'Personal Information',
active: false,
current: false
},
{
title: 'Travel Plans',
active: false,
current: false
},
{
title: 'Payment Method',
active: false,
current: false
},
{
title: 'Document Upload',
active: false,
current: false
}
]
})
mutations.js:
export default {
setCurrentStepBarItem(state) {
const index = state.stepLevel - 1
state.stepBarItems[index].active = true
state.stepBarItems[index].current = true
}
}
form.vue
created() {
this.$store.commit('visa/setCurrentStepBarItem')
},
Issue arises as the mutation is not triggering reactivity in the application.
https://i.sstatic.net/60eon.png
https://i.sstatic.net/7abs0.png
In spite of changes to the state and using a getter to access stepBarItems, no updates are visible. What could be causing this discrepancy?