类型错误：无法读取未定义的属性（读取“属性”）

Question

由于某种原因，我的应用程序无法识别接收到的 JSON 的属性之一。它接收“帖子”并应基于“posts.links”形成链接。我正在写这段代码：

<Link
 v-for="link in props.posts.links"
 :key="link.label"
 v-if="link.url"
 :href="link.url"
 class="px-4 py-2 rounded"
 :class="{'bg-emerald-400 text-white': link.active, 'bg-gray-200': !link.active}"
  >
  {{ link.label }}
</Link>

但是我收到“TypeError 错误：无法读取未定义的属性（读取“url”）”。如果您使用硬编码（例如 posts.links[0].url）编写，则应用程序会识别“url”属性并且一切正常。

如果将

v-if="link.url"

替换为

v-if="link !== undefined"

，则会出现另一个错误：

[Vue warn]: Property "link" was accessed during render but is not defined on instance.  

并且页面会加载，但页面导航栏不会出现

Answer 1

在第一次渲染时，

posts.links

不可用，请尝试添加条件渲染以检查它是否可用：

<template>
 <!-- ...-->
  <template v-if="posts.links">
   <Link
    v-for="link in posts.links"
    :key="link.label"
    :href="link.url"
     class="px-4 py-2 rounded"
     :class="{'bg-emerald-400 text-white': link.active, 'bg-gray-200': !link.active}"
  >
       {{ link.label }}
   </Link>

</template>

<!-- ...-->
</template>

注意，你不应该在同一个元素上设置 v-if 和 v-for，也不需要在模板中引用 props。