Vue中使用Axios请求OMDB API后如何访问JSON对象内的数组

• 初始值不匹配：你声明omdbRatings时初始值为空数组ref([])，但OMDB接口返回的是对象类型，首次渲染时omdbRatings没有Ratings属性，访问结果为undefined
• 异步请求时序问题：组件首次渲染早于Axios异步请求返回结果，此时还没有评分数据，直接访问数组下标会触发读取undefined属性的报错

1. 修正初始值声明：把初始值改为空对象，和接口返回的结构类型对齐

const omdbRatings = ref({})

2. 使用可选链做安全访问：Vue 3 模板原生支持可选链运算符，访问嵌套属性前加?.做非空校验，避免报错，同时可以设置兜底默认值

<!-- 访问首个评分示例 -->
<p>IMDb评分: {{ omdbRatings.Ratings?.[0]?.Value || '暂无评分' }}</p>

如果是Vue 2环境不支持可选链，改用逻辑与做层级校验：

<p>IMDb评分: {{ omdbRatings.Ratings && omdbRatings.Ratings[0] && omdbRatings.Ratings[0].Value || '暂无评分' }}</p>

3. 批量渲染评分列表可以搭配v-if判断后遍历

<template>
  <div class="rating-list" v-if="omdbRatings.Ratings?.length">
    <div v-for="(item, idx) in omdbRatings.Ratings" :key="idx">
      *{{ item.Source }}*: {{ item.Value }}
    </div>
  </div>
  <p v-else>暂无评分数据</p>
</template>

4. 检查请求赋值逻辑：ref类型的响应式变量赋值要操作.value属性

// 请求成功后赋值示例
axios.get('OMDB接口请求地址').then(response => {
  omdbRatings.value = response.data
})

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