Получаю данные с сервера в виде массива объектов и через v-for перебираю массив в
<li v-for="item of data.items" :key="item.id">
<a class="catalog__pic" href="#">
<img
:src="item.colors[0].gallery[0].file.url"
:alt="item.title"
/>
</a>
<h3 class="catalog__title">
<a href="#">
{{ item.title }}
</a>
</h3>
</li>
мне нужно получить значение свойства (например свойство -"url") каждого из item, которое находится по такому пути:
item.colors[0].gallery[0].file.url
И Проблема заключается в том, что некоторые объекты item могут не иметь свойство colors либо свойство имеется но оно пустое - null, либо же может отсутствовать gallery, которое аналогично может существовать но иметь значение null. Тем самым, логично, что получаю ошибку из вопроса.
Возможно ли в данном обращении к свойству url
item.colors[0].gallery[0].file.url проверить существование так, что если хотя бы одно из свойств не существует- то ошибку не получать (более лучшим способом), потому. что
На данный момент реализовал так, написав в methods:
methods: {
check(item) {
if(item.colors && item.colors[0] && item.colors[0].gallery && item.colors[0].gallery[0] ){
return item.colors[0].gallery[0].file.url
}
return '';
}
}
Работает, так проверяем каждое отдельное свойство, но это выглядит как-то ужасно.
И в template передаю каждый item для проверки в метод check:
<template>
<li v-for="item of data.items" :key="item.id">
<a class="catalog__pic" href="#">
<img
:src="check(item)"
:alt="item.title"
/>
</a>
<h3 class="catalog__title">
<a href="#">
{{ item.title }}
</a>
</h3>
</li>
<template>
Если таких свойств будет несколько (не только до данного url изображения) до которых нужно добраться, то каждое из них нужно в условии "раскладывать" и каждое последовательно так проверять.. Или есть более адекватный способ?)