Question

因此我的组件之一中包含以下代码：

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

然后在我的模块突变中，我有以下代码：

mutations: {

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

最后在我存储加载属性的组件中，我有这个：

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

无论如何，由于某种原因，Loading组件未显示。但是，loading。）方法中的console.log对于this。$ store.state.section.loading返回true。因此由于某种原因，Vue并未在实际DOM中选择load == true。任何帮助将不胜感激。

Answer 1

您需要<!DOCTYPE html> <html lang="en"> <head> <title>Assignment 2</title> </head> <body> <table> <tr> <th>Number</th> <th>Squared</th> <th>Divided by Pi</th> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html>来自计算属性方法的值：

return

VueJS-vuex计算属性，DOM不更新

1 个答案: