Vuejs - vuex 계산 속성, DOM이 업데이트되지 않음
컴포넌트 중 하나에 다음 코드가 있습니다.
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는 이에 대해 true를 반환합니다.$store.state.section.loading을 실행합니다.따라서 Vue가 실제 DOM에서 로드 == true를 인식하지 못하고 있습니다.어떤 도움이라도 주시면 감사하겠습니다.
할 필요가 있다return
계산된 속성 방법의 값:
loading() {
return this.$store.state.section.loading;
}
언급URL : https://stackoverflow.com/questions/54795641/vuejs-vuex-computed-property-dom-not-updating
'programing' 카테고리의 다른 글
Java의 불변 배열 (0) | 2022.07.19 |
---|---|
JSON 데이터를 Java 개체로 변환하는 중 (0) | 2022.07.19 |
VueJ에서 렌더링 목록 항목의 innerText를 가져오는 방법s (0) | 2022.07.19 |
vue submit 버튼 데이터 (0) | 2022.07.19 |
구성 요소의 v-data-table: 기본적으로 모든 항목이 선택되도록 하려면 어떻게 해야 합니까? (0) | 2022.07.19 |