Quiero verificar si la URL de la propiedad está configurada en el objeto del elemento, si no está allí, quiero mostrar una imagen de marcador de posición. Algo como esto:
<img v-if="item.relationships.main_image.attributes.url" :src="item.relationships.main_image.attributes.url" :alt="item.attributes.name" class="h-full w-full" /> <img v-else :src="require('@/assets/placeholder.png')" alt=""/>El problema es que mi objeto de elemento puede no tener ninguna propiedad, ya que el backend solo envía esas propiedades si realmente hay una imagen vinculada al elemento.
¿Cómo puedo verificar si un objeto tiene esa propiedad profunda?
Error given: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'attributes')Puede simplificar esto y deshacerse de esta etiqueta img adicional. Además, si alguna de las propiedades del objeto del elemento puede ser null , puede usar el encadenamiento opcional (p. ej item?.relationships... ).
No sé qué propiedad puede y no puede ser null , así que supongamos el peor de los casos:
<img :src="item?.relationships?.main_image?.attributes?.url || require('@/assets/placeholder.png')" :alt="item?.attributes?.name || 'placeholder'" class="h-full w-full"/>