Я получаю данные с сервера во Vue. Ответ выглядит следующим образом:
{
"items": [
{
"id": 1,
"title": "Носки",
"slug": "noski",
"price": 199,
"colors": [
{
"id": 44,
"color": {
"id": 20,
"title": "Red",
"code": "#dd0808"
},
"gallery": [
{
"file": {
"url": "https://vue-moire.skillbox.cc/uploads/file/3/2/4/324e1f4fb34931a1d367602a730a75b5.jpg",
"name": "324e1f4fb34931a1d367602a730a75b5.jpg",
"originalName": "Rectangle 121.jpg",
"extension": "jpg",
"size": "4.3 Кб"
}
}
]
}
],
"seasons": [
{
"id": 2,
"title": "Осень",
"code": "autumn",
"productsCount": 10
},
{
"id": 4,
"title": "Весна",
"code": "spring",
"productsCount": 10
}
],
"materials": [
{
"id": 2,
"title": "Шерсть",
"code": "wool",
"productsCount": 4
}
]
}
]
}
Мне необходимо добраться до url изображения. Вот код, с помощью котрого я пытался получить данные по url:
data() {
return {
productsData: null,
};
},
computed: {
products() {
return this.productsData ? this.productsData.items : [];
},
image() {
return this.productsData.items.flatMap((item) => {
return item.colors.flatMap((itemI) => {
return itemI.gallery.flatMap((itemIm) => {
return {
...itemIm,
image: itemIm.file.url,
};
});
});
});
},
},
Через image() получается вывести изображения, но тогда они выводятся все (некоторые объекты содержат по 2 и более изображения). А мне нужно только первое, которое попадается. Также через нее нет возможности обратиться к "title", "id" и "price". Подскажите, пожалуйста, как можно это все уместить в одном computed свойстве или решить данную проблему?