Vue项目处理JSON数据报错：无法读取url属性及link未定义问题

错误原因分析 #

1. 第一个TypeError：组件初始化阶段，props.posts或posts.links可能未完成赋值（比如异步请求尚未返回），导致v-for遍历的是undefined，此时link变量为undefined，访问link.url自然抛出属性读取错误。硬编码能正常运行是因为此时posts.links已经有有效数据。
2. 第二个Vue警告：当posts.links为undefined时，v-for不会生成任何迭代项，link变量根本不存在，此时v-if="link !== undefined"会尝试访问一个未定义的变量，触发Vue的渲染警告。

解决方案 #

方案1：给props设置默认值

在组件的props定义中，给posts设置默认值，确保初始状态下links是空数组：

props: {
  posts: {
    type: Object,
    default: () => ({ links: [] })
  }
}

方案2：模板中添加兜底逻辑

修改v-for的遍历源，用可选链操作符和空数组兜底，确保始终遍历有效数组：

<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>

方案3：用父容器包裹并判断

在v-for外层加一个容器，先判断posts.links是否存在，避免遍历无效值：

<template v-if="props.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>
</template>

内容的提问来源于stack exchange，提问作者Romay