How should I take a multidimensional array in vuejs?

Question

This problem has made me sleep well in two days. This is my code with 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 data : https://api.steampowered.com/ISteamWebAPIUtil/GetSupportedAPIList/v1/

No matter how I do it, I can't get the value of apilist->interfaces->name. The above example code system prompts me Cannot read property'interfaces' of undefined , which part is the problem?

===================update

I have installed chrome vue dev, but it seems to work on nuxt applications. Now I try to print the entire data data. The data generated when I typed the corresponding connection directly in the browser is as follows: enter image description here

But strange things happen, and when I jump to this link from somewhere else in the application, the data data is like this: enter image description here

I tried v-for="item in data.apilist" {{item.interfaces.name}} or v-if="data.apilist" or v-if="data" and he no longer complains but no data is generated.

This is the result of the powershell output: enter image description here && enter image description here

Sorry, when I first edited, I pasted the wrong code, the correct code has been updated, still prompting this error — AGD
– AGD, Commented Mar 21, 2018 at 10:30
Did you try to debug your data obejct ? Do you use Chrome Vue Dev tools ? chrome.google.com/webstore/detail/vuejs-devtools/… — Ekushisu
– Ekushisu, Commented Mar 21, 2018 at 10:34
I suspect that your statement is incorrect, try : v-if="data.apilist" or v-if="data" — Ekushisu
– Ekushisu, Commented Mar 21, 2018 at 10:35

Ekushisu · Accepted Answer · 2018-03-21 10:05:33Z

1

Cannot read property'interfaces' of undefined

Simply means that you are trying to access to the property "interfaces" on a undefined reference : somethingThatDoesntExist.interfaces

Here is the mess :

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

You are iterating on data.apilist.interfaces and binding just beneath :

data.interfaces

But you need to bind

item.interfaces

Since you are using v-for="item in ..." and not v-for="data in ...". Code review is important before asking.

answered Mar 21, 2018 at 10:05

Ekushisu

4612 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AGD Over a year ago

Sorry, I paste in the wrong code, the correct code has been updated, still prompting this error

Collectives™ on Stack Overflow

How should I take a multidimensional array in vuejs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related