Как передать пропсы в компонент через цикл?

Question

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

Добрый вечер.
Имеется родительский компонент, который передает в качестве пропса массив с объектами

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

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

Имеется дочерний компонент, который пропускает через цикл компонент

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

И, наконец, шаблон компонента ListLoadingItem

let newsListItem = defineProps({
  newsListItem: Object
});

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

Проблема в том, что я не могу передать в виде пропсов в ListLoadingItem отдельный элемент массива newsList, как это можно сделать?

Answer 1

[Aetae]

let newsListItem = defineProps({
  newsListItem: Object
});

->

defineProps({
  newsListItem: Object
});

или, если нужно использование свойств не только в шаблоне:

const props = defineProps({
  newsListItem: Object
});

1. Завяленные свойства по умолчанию уже есть в шаблонах.
2. defineProps - возвращает реактивный объект props целиком, а не какое-то конкретное из свойств.

Comments

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

мне нужно в шаблон ListLoadingItem передавать данные отдельного объекта из массива newsList, чтобы в newsListItem.title попадал title итерируемого объекта

[Aetae]

Олег Андрианов, и? Ты так и делаешь. Проблема только в том, в чём я написал.
Тык.

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

Aetae, точно)) не думал что это влияет на отображение... спасибо большое за помощь!!!