Vue.js中如何处理多维数组？附Vue.js+Axios+Nuxt代码示例

兄弟，我瞅了下你贴的代码，这几个小问题应该就是让你两天没睡好的根源，咱们一个个捋：

代码里的核心问题 #

• asyncData没有返回数据：你用await拿到了axios的响应，但没把数据return出去，Nuxt没法把这些数据注入到组件里，模板自然拿不到data.apilist
• 缺少初始值定义：组件data里只定义了title，但模板里用的是data.apilist，初始状态下这个值是undefined，直接访问interfaces会抛错
• v-if的位置不合理：你把v-if放在li上，但此时data.apilist可能还没加载完成，直接访问data.apilist.interfaces会导致“Cannot read properties of undefined”的错误
• 缺少错误处理：asyncData里没做异常捕获，请求失败时会直接导致页面报错

修正后的完整代码 #

<template>
  <!-- 先判断apilist是否存在，避免后续访问interfaces报错 -->
  <ul v-if="apilist">
    <li v-for="item in apilist.interfaces" :key="item.id"> <!-- 建议用唯一id当key，不要直接用item对象 -->
      {{ item.name }}
    </li>
    <!-- 当接口列表为空时给个提示 -->
    <li v-if="apilist.interfaces.length === 0">暂无接口数据</li>
  </ul>
  <!-- 数据加载中的状态提示 -->
  <div v-else>加载中...</div>
</template>

<script>
import axios from 'axios'

export default {
  // 定义初始值，避免渲染时undefined报错
  data: () => ({
    title: '',
    apilist: null
  }),
  async asyncData({ params, error }) {
    try {
      const res = await axios.get(
        `https://bird.ioliu.cn/v1?url=https:...` // 这里替换成你的实际接口地址
      )
      // 把请求到的数据return出去，Nuxt会自动注入到组件的data/props中
      return {
        apilist: res.data.apilist // 假设接口返回的结构是{ apilist: { interfaces: [...] } }
      }
    } catch (err) {
      // 请求失败时触发Nuxt的错误页面，或者自定义错误处理
      error({ statusCode: 500, message: '接口请求失败' })
      // 返回空数据避免页面崩溃
      return { apilist: null }
    }
  }
}
</script>

关键修改点说明 #

1. asyncData返回数据：必须把请求到的apilistreturn出去，Nuxt会自动将其合并到组件的data中，模板里直接用apilist即可（不用加data.前缀）
2. 初始值与v-if判断：在data里初始化apilist: null，然后在ul上添加v-if="apilist"，确保只有当数据存在时才渲染列表，避免访问undefined的属性
3. 合理设置key值：v-for的key建议用item的唯一标识（比如id），不要直接用item对象，这样性能更好，也符合Vue的最佳实践
4. 错误捕获：用try/catch包裹axios请求，请求失败时可以触发Nuxt的错误页面，或者自定义提示，避免页面直接崩溃
5. 加载状态提示：添加v-else显示加载中，提升用户体验

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