Ситуация в упрощенном виде следующая: есть компонент, внутри которого нужно вывести два дочерних компонента и передать им один и тот же общий параметр:
<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.