I am currently facing a challenge with VueJS Vuex and Axios:
The issue arises when I retrieve an array with Axios and loop through it to populate its children this way: "Rubriques" has many self-relations, so one rubrique can have multiple child rubriques
ACTIONS :
actions: {
get_main_rubriques: ({ commit }) => {
axios.get('http://localhost:8180/unv-api/rubrique/search/rsql?query=niveau==1')
.then(resp => {
let results = resp.data._embedded.rubriques
results.forEach(element => {
axios.get('http://localhost:8180/unv-api/rubrique/search/rsql?query=idpere==' + element.id)
.then((result) => {
element.childs = result.data._embedded.rubriques
})
.catch((err) => {
console.log(err)
})
})
console.log(results)
commit('MUTE_MAIN_RUBRIQUES', results)
})
.catch(err => {
console.log(err)
})
}
}
Mutations :
MUTE_MAIN_RUBRIQUES: (state, rubrique) => {
state.rubriques = rubrique
}
APP.VUE
computed: {
...mapState([
'rubriques'
])
},
created: function () {
this.$store.dispatch('get_main_rubriques')
}
<b-dropdown v-for="item in rubriques" :key="item.id" v-bind:text="item.libelle" id="ddown1" class="m-md-1">
<b-dropdown-item-button v-for="child in item.childs" :key="child.id" v-bind:text="child.libelle">
{{ child.id }} - {{ child.libelle }}
</b-dropdown-item-button>
</b-dropdown>
The issue I'm experiencing is that the parent dropdowns display correctly, but the child dropdowns do not. They are also not present in the state, although they are logged in the console before the action's commit.
Could anyone point out what I might be doing wrong? Thanks.