Рендеринг дочернего компонента только после завершения метода asyn c в смонтированном родительском компоненте

Question

У меня есть родительский компонент, который отображает дочерний компонент. Я делаю асин c вызов (топор ios 'get' запрос от действий Vuex) из mounted родительского компонента, который выбирает данные, необходимые для дочернего компонента.

Я хочу предотвратить рендеринг дочернего компонента, пока вызов asyn c не завершен. Может кто-нибудь предложить какой-нибудь элегантный подход?

Answer 1

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'])
}