[英]Vuejs - vuex computed property, DOM not updating
因此,我的组件之一中包含以下代码:
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。 任何帮助,将不胜感激。
您需要从计算属性方法中return
值:
loading() {
return this.$store.state.section.loading;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.