Как передать пропсы, данные для которых получаем асинхронно?

Question

[Олег Андрианов]

Добрый день.
Имеется родительский компонент, который должен передавать дочерним компонентам массив с объектами. Массив получаем асинхронно с помощью fetch

let newsList = [];
// newsList = [ {id:1, title: "Заголовок"}, {id:2, title: "Заголовок"}...]

const sendData = () => {
  fetch('/api/news-list.json', requestOptions)
      .then(response => response.json())
      .then(result => newsList = result)
}

<ListLoading :news-list="newsList" />

Дочерний компонент:

defineProps({
  newsList: Array
});

<ListLoadingItem v-for="item in newsList" :key="item.id" :news-list-item="item" >
      {{item.id}}
</ListLoadingItem>

Шаблон компонента ListLoadingItem:

defineProps({
  newsListItem: Object
});

<div class="list-loading-item">
      <h3 class="gw-list-loading-item__title">
        {{ newsListItem.title }}
      </h3>
</div>

Данные по фетчу приходят, но в пропсе остается значение по умолчанию - пустой массив. В корневой компонент вставлял проверку v-if - не помогло:

<ListLoading v-if="sendData" :news-list="newsList" />

пропсам задавал результат выполнения функции - не помогло:
<ListLoading :news-list="sendData" />
И вроде асинхронные компоненты это в другую сторону. Можете, пожалуйста, подсказать что делаю не так?

Answer 1

[Денис]

У вас newsList не реактивно
Замените на:
const newsList = ref([])
В методе получения данных:
newsList.value = result

Comments

[Олег Андрианов]

не работает(

[Денис]

Я полностью повторил ваш код локально и всё работает. Данные как запрашиваете?

<script setup>
    import { onMounted, ref } from "vue";
    import ListLoading from "@/components/habr/ListLoading.vue";

    const newsList = ref([]);

    const sendData = () => {
        fetch("/news-list.json")
            .then((response) => response.json())
            .then((result) => (newsList.value = result));
    };

    onMounted(async () => {
        await sendData();
    });
</script>

<template>
    <ListLoading :news-list="newsList" />
</template>

<style lang="scss"></style>

[Олег Андрианов]

Денис, Я пропустил хук onMounted(), теперь все работает, спасибо большое!

[iljaGolubev]

Олег Андрианов,

/* нет нужды в onMounted->await
onMounted(async () => {
        await sendData();
    });
*/
sendData(); // заполнит реактивный массив

[Олег Андрианов]

iljaGolubev, буду иметь в виду, спасибо!

Answer 2

[Алексей Ярков]

v-if="list.length"

Comments

[Олег Андрианов]

<ListLoading v-if="newsList.length" :news-list="newsList" />

не работает, теперь элемент вообще не отображается

[Алексей Ярков]

Олег Андрианов, вам ниже объяснили почему ))

[Олег Андрианов]

Алексей Ярков, проверяю пропс на длину и сделал переменную реактивной, не работает.

[Алексей Ярков]

Олег Андрианов, так вы хук забыли. Мой ответ вполне решает проблему.