Vue中使用Axios获取嵌套JSON后无法访问深层数据的问询

嘿，这个问题很好解决！因为你的meals是一个数组，不是单个对象，所以得在现有的v-for里再套一层循环来遍历每一份餐品，这样就能轻松拿到name和prices.students这些深层数据啦。

具体实现代码 #

你可以把模板改成这样：

<div v-for="date in dateData" :key="date.date">
  <!-- 展示顶层的日期和是否停业数据 -->
  <p>{{ date.date }} {{ date.closed ? '已停业' : '正常营业' }}</p>
  
  <!-- 嵌套遍历meals数组，先判断meals是否存在避免报错 -->
  <div v-if="date.meals" v-for="meal in date.meals" :key="meal.id">
    <p>餐品名称：{{ meal.name }}</p>
    <p>学生专属价：{{ meal.prices.students }} 元</p>
    <p>餐品分类：{{ meal.category }}</p>
    <hr>
  </div>
</div>

几个重要的细节 #

• 嵌套v-for是核心：每个date项里的meals是数组结构，必须通过v-for="meal in date.meals"逐个取出餐品对象，才能访问它的内部属性
• 必加:key属性：给每个循环项加上唯一的key值（比如用date.date和meal.id），这是Vue的性能优化最佳实践，能避免不必要的DOM重渲染
• 空值判断很必要：加上v-if="date.meals"可以防止当meals为空、未定义或者加载延迟时出现控制台报错
• 直接访问深层属性：拿到单个meal对象后，就像访问顶层的date.date一样，直接用meal.name、meal.prices.students就能获取深层值啦

如果你只是想快速访问某一个特定餐品（比如数组里的第一个），也可以直接用索引定位，比如：

<div v-for="date in dateData" :key="date.date">
  <p>今日主打餐：{{ date.meals[0].name }}</p>
</div>

不过这种方式灵活性差，万一meals数组长度变化或者为空就容易出问题，还是更推荐用嵌套v-for遍历所有餐品的方式哦~

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