programing

중첩된 개체 vue js에 대해 v-if 및 v-를 올바르게 수행하는 방법

shortcode 2022. 7. 27. 00:08
반응형

중첩된 개체 vue js에 대해 v-if 및 v-를 올바르게 수행하는 방법

v-for로 중첩된 개체 컨텐츠를 렌더링할 수 없습니다. 개체를 포함하는 프로펠이 있지만 v-if="prop"을 수행할 때 div가 표시되지 않았습니다.해결 방법을 알려주세요.렌더링에 사용한 구문은 다음과 같습니다.

<div v-if="statisticBrandBrowsers && statisticBrandBrowsers.length">
  <div v-for="(item, index) in statisticBrandBrowsers">
    <div>View: {{item.page_view.hits}}</div>
  </div>
</div>

내 소품:

vue dev 툴에서 검사된 소품

문제는 내부가 아닌 조건부 렌더링 내부에 있습니다.v-for오브젝트에는 라는 속성이 없기 때문에 루프가 발생합니다.length따라서 다음과 같은 작업을 수행해야 합니다.

<div v-if="statisticBrandBrowsers && Object.values(statisticBrandBrowsers).length">

Object.values(statisticBrandBrowsers)다음과 같은 어레이를 제공합니다.length소유물

언급URL : https://stackoverflow.com/questions/54120543/how-to-properly-v-if-and-v-for-nested-object-vue-js

반응형