Seeking assistance with binding a form to a list of Defaultsettings obtained from an array of objects in NuxtJs and VueX. The list of Defaultsettings includes:
- Name defaultsetting (text)
- Active (a switch button that determines if the defaultsetting will be active or not - boolean)
- Mandatory (a radio button that determines if the defaultsetting will be required or not - boolean)
A server-side call using Axios retrieves the list of defaultsettings which are then dispatched to the jobs store in the following manner:
asyncData(context) {
return context.app.$axios
.$get('jobs/create')
.then(data => {
context.store.dispatch('jobs/getDefaultsettings', data.defaultsettings)
})
.catch(e => context.error(e))
},
The 'getDefaultsettings' function in jobs.js handles the incoming data:
getDefaultsettings(context, data) {
context.commit('setDefaultsettings', data)
},
The 'setDefaultsettings' mutation within getDefaultsettings sets the received data accordingly:
setDefaultsettings(state, data) {
data.forEach(function(d) {
d.mandatory = false
d.active = false
})
state.defaultsettings = data
},
To ensure the defaultsettings are available in the data, they are stored in the created function as shown below:
created() {
this.ruleForm.defaultsettings = this.$store.state.vacatures.defaultsettings
}
However, confusion arises when trying to bind the data. Reference was made to an example found at https://vuex.vuejs.org/guide/forms.html, but encountering an error stating "Cannot read property 'mandatory' of undefined".
<div class="row" v-for="defaultsetting in ruleForm.defaultsettings " :key="defaultsetting.id">
<div class="col-sm-4">
{{defaultsetting.name}}
</div>
<div class="col-sm-4">
<el-checkbox v-model="defaultsetting.mandatory" :value="mandatory" @input="updateMandatory"/>
</div>
Added a computed property for 'mandatory':
computed: {
mandatory () { return this.$store.state.vacatures.defaultsetting.mandatory }
},
Additionally, methods were implemented:
methods: {
updateMandatory (e) {
this.$store.commit('updateMandatory', e.target.value)
},
},
In jobs.js, a new mutation 'updateMandatory' was introduced:
updateMandatory (state, setting) {
state.defaultsetting.mandatory = setting
},
Any guidance on resolving this issue would be highly appreciated!