Vue.js 3：如何在v-for外安全展示Fetch获取的JSON值？

问题核心是数据请求完成前，ytitems是空数组，直接访问索引对应的项会得到undefined，进而读取属性时报错。以下是几种Vue层面的有效解决方式：

1. 可选链操作符（最便捷） #

在模板或脚本中访问属性时，使用?.操作符，当左侧值为undefined/null时，会直接返回undefined而非抛出错误：

<template>
  <!-- 模板中使用 -->
  <div>{{ ytitems[0]?.channelTitle }}</div>
  <img :src="ytitems[thisindex]?.thumbnailHQ" alt="缩略图">
</template>

<script setup>
import { ref, onMounted } from 'vue'

const ytitems = ref([])
const thisindex = ref(0)

onMounted(async () => {
  const res = await fetch('YouTube API 地址')
  const data = await res.json()
  ytitems.value = data.items.map(item => youtubeParser(item))
})
</script>

2. 初始化时设置匹配结构的默认值 #

给ytitems初始化一个符合数据结构的默认值，确保即使请求未完成，访问属性时不会遇到undefined：

import { ref, onMounted } from 'vue'

// 按照实际返回数据的结构定义默认值
const ytitems = ref([{
  channelTitle: '',
  thumbnailHQ: '',
  // 其他必要字段
}])

onMounted(async () => {
  // 接口请求逻辑...
  ytitems.value = data.items.map(item => youtubeParser(item))
})

这种方式适合需要初始占位内容的场景，避免页面出现闪烁。

3. 正确使用v-if判断（修正之前的错误用法） #

如果之前用v-if没生效，大概率是判断逻辑不对。需要直接判断要访问的索引项是否存在，而不是仅判断数组是否存在：

<template>
  <!-- 判断具体项存在后再渲染 -->
  <div v-if="ytitems[thisindex]">
    <p>{{ ytitems[thisindex].channelTitle }}</p>
    <img :src="ytitems[thisindex].thumbnailHQ">
  </div>
</template>

或者单独判断数组长度（针对固定索引如0的场景）：

<div v-if="ytitems.length > 0">
  {{ ytitems[0].channelTitle }}
</div>

4. 使用计算属性封装（适合多次访问的场景） #

如果需要多次访问某个索引项，用计算属性统一处理空值情况，代码更简洁：

import { ref, computed, onMounted } from 'vue'

const ytitems = ref([])
const thisindex = ref(0)

// 封装当前要访问的项，为空时返回空对象
const currentYtItem = computed(() => ytitems.value[thisindex.value] || {})

onMounted(async () => {
  // 接口请求逻辑...
})

模板中直接使用计算属性：

<template>
  <p>{{ currentYtItem.channelTitle }}</p>
  <img :src="currentYtItem.thumbnailHQ">
</template>

以上方法都能从根源避免因异步请求延迟导致的属性读取错误，根据你的实际场景选择即可。

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