In one of my components, I have the following code snippet:
export default {
name: 'section-details',
components: {
Loading
},
mounted() {
if (!this.lists.length || !this.section_types.length) {
this.$store.dispatch('section/fetch_section_form_data', () => {
if (this.section) {
this.populate_form();
}
});
}
else if (this.section) {
this.populate_form();
}
},
computed: {
section_types() {
return this.$store.state.section.section_types;
},
lists() {
return this.$store.state.list.lists;
},
loading() {
console.log(this.$store.state.section.loading);
this.$store.state.section.loading;
}
},
.
.
.
}
There is a computed property called "loading" which fetches an attribute from my Vuex store during an AJAX request.
Within my section Vuex module, the following function is defined:
fetch_section_form_data({ commit }, callback) {
commit("isLoading", true);
sectionService
.fetch_form_data()
.then((data) => {
commit("isLoading", false);
commit("fetch_section_types_success", data.section_types);
commit("list/fetch_lists_success", data.lists, { root: true});
if (callback) {
callback();
}
})
.catch((err) => {
commit("isLoading", false);
})
;
}
The mutations for the module contain the following code:
mutations: {
isLoading(state, status) {
state.loading = status;
},
}
Finally, in the component where the loading property is stored, this code is present:
<Loading v-if="loading"></Loading>
However, despite the console.log indicating that this.$store.state.section.loading is true, the Loading component does not appear on the actual DOM. Any assistance in resolving this issue would be greatly appreciated.