vue 프로젝트에서 백엔드 인터페이스를 호출하여 데이터를 가져왔지만 요소 렌더링null 오류를 해결합니다

2475 단어
백엔드 데이터를 가져오는 것이 대상이기 때문에 데이터에서 데이터를 정의할 때 부여하는 초기값은null입니다
가정:
data(){
	return {
		videoObj:null
	}
}

template 템플릿의 DOM 요소:
<div>{{ videoObj.title}} </div>

비디오 Obj에 null이라는 초기 값을 부여했기 때문에 호출 인터페이스를 사용하기 전에 null을 처음 렌더링합니다. 즉 div 안의 비디오 Obj가 null을 처음 읽기 때문에 TyperError: Cannot read property of 'title' of null에 보고합니다.
솔루션:
1. 비디오 Obj에 초기값 부여 {}
2.template 템플릿에서 비디오의 부모 요소를 읽고 v-if="비디오Obj!=null"
PS: 프로젝트를 하는 과정에서 유사한 오류가 많이 발생했습니다. 주로 첫 번째 렌더링 문제입니다. 백엔드에서 되돌아오는 데이터 데이터의 유형은 수조arr 또는 대상obj입니다.template에서 렌더링할 때 수조arr라면 v-for를 통해arr를 훑어봅니다. 만약에 모든 item이 대상이면item을 통해item을 통과합니다.xxx 데이터 가져오기;대상obj라면obj를 통해.xxx에서 대응하는 데이터를 가져옵니다.이런 형식arr.key/obj.키의 형식이 잘못될 수 있습니다. 처음에 렌더링에 대응하는 키를 찾을 수 없기 때문에 이 문제를 해결하기 위해 가장 바깥쪽의div에 v-if를 추가하여 수조arr와 대상obj가 비어 있는지 판단할 수 있습니다. 비어 있으면 렌더링하지 않습니다.
 : v-if="arr.length !== 0"
	  v-if="JSON.stringify(arr) !== '{}' "
 : v-if="JSON.stringify(obj) !== '{}' "
//   : 
// obj null ，JSON.stringify(null) !== '{}' true

PS: 빈 배열이 반복되지 않음
MATLAB의 fig 파일에서 데이터 추출
Combination Sum II 【leetcode】

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage