javascript - props를 통해 객체를 전달할 때 vue에서 오류를 보고합니다.

Question

상위 구성 요소 App.vue

하위 구성요소 sonCp.vue

데이터 구조

오류가 보고되었지만 데이터가 렌더링될 수 있습니다

죄송합니다. 데이터를 검색하는 방식이 올바른지 확인해 주세요.

Answer 1

하위 구성 요소는 처음에 빈 문자열을 얻었고 .acount.name과 같은 속성이 없어 오류가 발생했습니다.

가장 쉬운 솔루션:

상위 구성 요소 App.vue 으아악

다음으로 변경됨:

으아악

Answer 2

비동기적으로 요청된 데이터는 두 번 렌더링됩니다! 첫 번째는 요청이 완료되지 않은 경우입니다. 이때 obj가 반환됩니다. 그런 다음 하위 구성 요소가 값을 얻으면 오류가 발생해야 합니다! 두 번째는 요청이 반환된 후 데이터가 있는 경우입니다. 따라서 해결책은 분명하며 많은 해결책이 있습니다.

Answer 3

처음에 dataObj는 null 문자이므로 하위 구성 요소에 전달되면 확실히 오류가 보고됩니다. v-if를 사용하여 데이터를 얻었는지 확인한 다음 얻은 후 렌더링할 수 있습니다.

Answer 4

1 위에서 언급했듯이 데이터가 있을 때 렌더링을 보장하기 위해 DOM에서 v-if를 통해 dataObj.length를 판단합니다(권장!!)

2. 상위 구성 요소 데이터 옵션에서 dataObj 개체의 데이터 구조를 다음과 같이 미리 설정합니다.

으아악

또한 게시자는 데이터 옵션의 초기 항목을 예약할 때 적절한 데이터 유형을 선택하고 기본값을 할당하는 것이 좋습니다. 예를 들어 상위 구성 요소의 dataObj는 배열 유형을 저장해야 합니다. 의미 표현도 향상되는 dataObj: []을 사용해 보세요.

Answer 5

으아악