Как рендерить компоненты по мере загрузки данных для них?

Ситуация в упрощенном виде следующая: есть компонент, внутри которого нужно вывести два дочерних компонента и передать им один и тот же общий параметр:

<template>
	
	<section class="section">
		<children-1 :some_param="some_param" />
		<children-2 :some_param="some_param" />		
	</section>

</template>

<script>
  async mounted() {
    const data = await this.getData('/api/endpoint')
      this.some_param = data.some_param
  },

  data() {
    return {
      some_param: null
    }
  },

  methods: {
    getData(url) {
      axios.get(url).then(response => response.data)
    }
  }
</script>


Параметр этот, в свою очередь, нужно получить по api. У каждого дочернего компонента есть также свои api-запросы (по одному на компонент) на получение данных.

Задача - сделать так, чтобы компонент рендерился сразу же, как получит свои данные. Как сделать так, чтобы все три запроса происходили одновременно, и когда какой-то завершается- компонент рендерился? Неважно, в каком порядке они будут завершены, главное, чтобы выполнялись не поочередно, а одновременно. Сейчас выполняется так, что сначала загружаются данные первого компонента, потом - второго, и потом - some_param.
  • Вопрос задан
  • 223 просмотра
Пригласить эксперта
Ответы на вопрос 1
yarkov
@yarkov Куратор тега Vue.js
Помог ответ? Отметь решением.
<children-1 v-if="some_param" :some_param="some_param" />


1
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы