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