Vue variable returning undefined via axios call/variable assignment

Question

I'm trying to access data that's nested in an axios call. When I access the data's first level (menuItems in the attached ss) I'm able to get into the first set of objects and their subsequent children. I am also able to return the data from those children (submenus) but I can't assign/get to the data within the submenus. My vue variable returns undefined.

Based on my previous experience (and what the internet tells me) I should be able to access this data normally...I'm quite confused as to why my variable returns undefined but my v-for returns the data as an array of objects.

See image for screenshot [1]: https://i.stack.imgur.com/0iq38.png

Vue Template

<template>
  <nav id="nav">
    <ul  id="main-nav-list" class="dropdown">
      <li class="drowndown-menu" v-for="item of menuItems" :key="item">
        <button class="menu-button" role="button" @click="toggleMenuItem">
          {{ item.menuText }} <!-- this gives me all the data and I can loop through the top-level stuff -->
          <svg class="icon"><use href="#chevron"></use></svg>
        </button>
        <div class="mega-menu" v-show="clicked">
          <ul v-for="(item, index) of menuItems" :key="item.submenus">
             <li><h3>{{ item.submenus.index.submenuText }}</h3></li> <!-- this gives me nothing -->
             <li><a>{{ item.submenus }}</a></li> <!-- This gives me the array of objects (as a test)-->
             <li><a>{{ item.submenuText }}</a></li>  <!-- this gives me nothing -->
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</template>

Script

import axios from 'axios'

  export default {
    data: function() {
      return {
        menuItems: [], //this returns data I'm able to loop into
        submenuItems: [], //this returns undefined
        clicked: false
      }
    },
    methods: {
      toggleMenuItem() {
        this.clicked = !this.clicked
      }
    },
    mounted () {
      //static api call
      axios.get('http://URL/api/TopMenu').then(response => {
        this.menuItems = response.data //this returns data I'm able to loop into
        this.submenuItems = response.data.submenus //this returns undefined
      });

      axios.get('http://URL/api/TopMenu').then(response => {

        this.submenuItems = Object.keys(response.data.submenus).map(k => ({
            short: k,
            price: response.data.submenus[k]
        }))
      });
    },
  }

JSON Snippet

[
  {
    "menuText": "Employee Resources",
    "submenus": [
      {
        "submenuLinks": [
          {
            "linkOnClick": " ",
            "linkTitle": "AR Notes Update",
          },
          {
            "linkOnClick": " ",
            "linkTitle": "Check Register",
          },
          {
            "linkOnClick": " ",
            "linkTitle": "GL File Import",
          },
          {
            "linkOnClick": " ",
            "linkTitle": "MRO Dept Approvers",
          },
          {
            "linkOnClick": " ",
            "linkTitle": "Update Material Cost",
         }
        ],
        "submenuText": "Finance"
      },
...}]

The submenus property is a property of the individual items. So response.data[0].submenus, response.data[1].submenus, etc. There isn't a submenus property directly on response.data. — skirtle
So your inner loop should be something like v-for="(subitem, index) of item.submenus". — skirtle
Wow okay I completely just doofed and messed that up earlier...that messed me up! Haha thanks for the sanity check, I should have known it was a dumb mistake I made! — ratPersona

ratPersona ratPersona · Accepted Answer · 2020-03-18T19:03:01

The submenus property is a property of the individual items. So response.data[0].submenus, response.data[1].submenus, etc. There isn't a submenus property directly on response.data.

So your inner loop should be something like v-for="(subitem, index) of item.submenus".

-skirtle

I was lookin' at the code too long, whoops!

Vue variable returning undefined via axios call/variable assignment

1 Answers