Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/478.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/vue.js/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/mercurial/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Vuejs-vuex计算属性,DOM未更新_Javascript_Vue.js_Vuex - Fatal编程技术网

Javascript Vuejs-vuex计算属性,DOM未更新

Javascript Vuejs-vuex计算属性,DOM未更新,javascript,vue.js,vuex,Javascript,Vue.js,Vuex,因此,我的一个组件中包含以下代码: export default { name: 'section-details', components: { Loading }, mounted() { if (!this.lists.length || !this.section_types.length) { this.$store.dispatch('section/fetch_section_form_dat

因此,我的一个组件中包含以下代码:

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;
        }
    },
    .
    .
    .
}
如您所见,我有一个用于“加载”的计算属性,用于在执行ajax请求时从vuex存储中检索属性

在我的vuex模块一节中,我有以下内容:

    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);
            })
        ;
    }
<Loading v-if="loading"></Loading>
然后,在模块的变体中,我有以下代码:

mutations: {

    isLoading(state, status) {
        state.loading = status;
    },
}
最后,在存储加载属性的组件中,我有:

    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);
            })
        ;
    }
<Loading v-if="loading"></Loading>


无论如何,由于某种原因,加载组件没有出现。但是,loading()方法中的console.log对此$store.state.section.loading返回true。因此,由于某些原因,Vue没有在实际DOM中获取加载==true。任何帮助都将不胜感激。

您需要
返回计算属性方法中的值:

加载(){
返回此。$store.state.section.loading;
}

d'oh!这么小的错误。谢谢你接电话that@janedoe如果它解决了你的问题,你应该接受答案。啊,它不让我,说我必须等一会儿。不管怎样,现在已经被接受了