Vuejs - vuex computed property, DOM not updating

Question

So I have the following code in one of my components:

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;
        }
    },
    .
    .
    .
}

As you can see I have a computed property for "loading" that retrieves the attribute from my vuex store for when doing an ajax request.

in my section vuex module i have this:

    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);
            })
        ;
    }

then in my mutations for the module i have the following code:

mutations: {

    isLoading(state, status) {
        state.loading = status;
    },
}

Finally in my component where I store the loading property I have this:

<Loading v-if="loading"></Loading>

Anyways, for some reason the Loading component isn't showing up. the console.log in the loading() method however, is returning true for this.$store.state.section.loading. So for some reason Vue isn't picking up that loading == true in the actual DOM. Any help would be appreciated.

Decade Moon Decade Moon · Accepted Answer · 2019-02-20T21:46:33

You need to return the value from the computed property method:

loading() {
    return this.$store.state.section.loading;
}

Vuejs - vuex computed property, DOM not updating

1 Answers