我应该如何在 vuejs 中获取多维数组？

Question

这个问题让我两天睡不好觉。 这是我的 vuejs & axios & nuxt 代码：

<template>
  <ul>
    <li v-for="item in data.apilist.interfaces" :key="item" v-if="data.apilist.interfaces">
      {{ item.name }}
    </li>
  </ul>
</template>
<script>
import axios from 'axios'
const util = require('util')
export default {
  data: () => ({
    title: ''
  }),
  async asyncData ({ params, error }) {
    let res = await axios.get(
      `https://bird.ioliu.cn/v1?url=https://api.steampowered.com/ISteamWebAPIUtil/GetSupportedAPIList/v1/`
    )
    return { data: util.inspect(res, { showHidden: true, depth: null }) }
  },
  head () {
    return {
      title: this.title
    }
  }
}
</script>

Json 数据：https://api.steampowered.com/ISteamWebAPIUtil/GetSupportedAPIList/v1/

无论怎么做，都无法得到apilist->interfaces->name的值。 以上示例代码系统提示我Cannot read property'interfaces' of undefined，是哪一部分的问题？

===================更新

我已经安装了chrome vue dev，但它似乎适用于 nuxt 应用程序。现在我尝试打印整个数据数据。 我直接在浏览器中键入对应连接时产生的数据如下： enter image description here

但是奇怪的事情发生了，当我从应用程序的其他地方跳转到这个链接时，数据数据是这样的： enter image description here

我试过v-for="item in data.apilist"{{item.interfaces.name}}或v-if="data.apilist"或v-if="data"，他不再抱怨但没有生成数据。

这是 powershell 输出的结果： enter image description here && enter image description here

Answer 1

Cannot read property'interfaces' of undefined

仅表示您正在尝试访问未定义引用上的属性“接口”：somethingThatDoesntExist.interfaces

这是一团糟：

<li v-for="item in data.apilist.interfaces" :key="item" v-if="data.apilist.interfaces">
      {{ data.interfaces }}
    </li>

您正在迭代 data.apilist.interfaces 并在下面绑定：

data.interfaces

但是你需要绑定

item.interfaces

因为您使用的是 v-for="item in ..." 而不是 v-for="data in ..."。 在询问之前，代码审查很重要。