반응형
맵의 데이터를 처리하는 방법vue에서 액세스할 속성의 정의되지 않은 오류를 방지하기 위해 첫 번째 렌더에서 시작합니다.
저는 mapGeters 도우미가 있는 vuex를 사용하여 스토어에서 저장된 어레이에 액세스하려고 합니다.
개체를 얻었지만 첫 번째 렌더링 중에 개체의 스토리지를 디스패치하는 API 호출이 완료될 때까지 mapGetters에 정의된 속성에 액세스할 수 없습니다.
이는 다음과 같은 결과를 낳습니다.undefined type error
저장된 개체를 검색할 수 있을 때까지 렌더링된 보기 코드가 손상됩니다.
페이지를 처음 로드하는 동안 계산된 섹션의 속성이 정의되지 않았거나 액세스할 수 있는지 확인하려면 어떻게 해야 합니까?
아래는 제 가게와 Vue 코드입니다.그created
lifecycle은 API 호출을 실행하여 성공적인 응답 시 어레이 개체 저장을 디스패치합니다.
스토어 코드
const state = {
assessments:[],
assessment:{},
inspections:[]
}
const mutations={
setAssessments(state, assessments){
state.assessments = assessments
},
setAssessment(state, assessment){
state.assessment = assessment
},
setInspections(state, inspections){
state.inspections = inspections
}
}
const getters={
assessments:state =>state.assessments,
inspections:state =>state.inspections,
assessment:state =>state.assessment
}
const actions={
saveAssessments({commit}, assessments){
commit("setAssessments", assessments)
},
saveInspections({commit}, inspections){
commit("setInspections", inspections)
},
saveAssessment({commit}, assessment){
commit("setAssessment", assessment)
}
}
const assessments = {
state,
mutations,
actions,
getters
}
export default assessments
게터 및 계산 섹션
import { assesVehicleEndpoint } from "@/utils/apis";
import { mapGetters} from 'vuex';
created: function (){
this.fetchAssessments()
},
computed:{
...mapGetters({
assessments:"assessments"
}),
completedAssessments(){
let compAssessments
if(this.assessments != undefined){
compAssessments = this.assessments.results.filter(assessment=>{
return(assessment.pre_pre_screening_status === "D" || assessment.pre_pre_screening_status === "C"
|| assessment.pre_screening_status === "D" || assessment.pre_screening_status === "C"
|| assessment.car_care_status === "D" || assessment.car_care_status === "C"
|| assessment.inspection_status === "D" || assessment.inspection_status === "C"
|| assessment.pre_screening_plus_status === "D" || assessment.pre_screening_plus_status === "C"
)
})
}
return compAssessments
},
}
언급URL : https://stackoverflow.com/questions/74529672/how-can-one-handle-data-from-mapgetters-on-first-render-to-avoid-undefined-error
반응형
'programing' 카테고리의 다른 글
컴파일 오류:'ASP.global_asax' 유형이 두 DLL에 모두 있습니다. (0) | 2023.06.15 |
---|---|
경로에 따라 각도 4 성분 숨기기 및 표시 (0) | 2023.06.15 |
Oracle 테이블 열 이름(공백 포함 (0) | 2023.06.15 |
Ruby에서 셸 명령을 호출하는 방법 (0) | 2023.06.15 |
asp.net 경로에서 타일(~) 사용 (0) | 2023.06.15 |