마운트된 상위 구성 요소에서 비동기 메서드가 완료된 후에만 하위 구성 요소

마운트된 상위 구성 요소에서 비동기 메서드가 완료된 후에만 하위 구성 요소

자식 구성 요소를 렌더링하는 부모 구성 요소가 있습니다.비동기 호출(Vuex 액션에서 'get'한 Axios 요청)을 발신하고 있습니다.mounted상위 구성 요소의 하위 구성 요소에 필요한 데이터를 가져옵니다.

비동기 호출이 완료될 때까지 하위 구성 요소의 렌더링을 방지하고 싶습니다.누가 좀 우아한 접근법을 제안해 줄 수 있나요?

v-if

<child v-if="mydata" />

mydata초기화된 데이터 속성일 수 있습니다.null:

data() {
  return {
    mydata: null
  }
}

이 값이 입력되면created/mounted,그child컴포넌트가 표시됩니다.

async created() {
  const response = await axios // ...
  this.mydata = response.data;
}

---

편집: 아래 의견을 바탕으로 합니다.Vuex의 경우 대신 다음을 수행합니다.

• 를 계속 사용v-if

데이터 속성 대신 계산 사용:

computed: {
   mydata() {
     return this.$store.state.mydata;
   }
}

또는 를 사용할 수 있습니다.mapState

import { mapState } from 'vuex';

computed: {
   ...mapState(['mydata'])
}

언급URL : https://stackoverflow.com/questions/60928796/render-a-child-component-only-after-async-method-is-completed-in-parents-mounte