对深度属性对象使用v-if

Question

我想检查属性url是否设置在项目对象上，如果没有，我想显示一个占位符图像。像这样:

<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=""/>

问题是，我的项目对象可能没有任何属性，因为后端只发送这些属性，如果有一个实际的图像链接到项目。

我如何检查一个对象是否有深度属性?

Error given: Uncaught (in promise) TypeError: Cannot read properties of null (reading 'attributes')

Answer 1

您可以简化并去掉这个额外的img标记。此外，如果任何项目对象属性都可以是null，则可以使用可选链接(例如item?.relationships...)。

我不知道哪个属性可以和不可以是null，所以让我们假设最坏的情况:

<img :src="item?.relationships?.main_image?.attributes?.url || require('@/assets/placeholder.png')"
:alt="item?.attributes?.name || 'placeholder'"
class="h-full w-full"/>