通过 axios 调用/变量赋值返回未定义的 Vue 变量答案

【问题标题】：Vue variable returning undefined via axios call/variable assignment通过 axios 调用/变量赋值返回未定义的 Vue 变量
【发布时间】：2020-06-29 20:33:36
【问题描述】：

我正在尝试访问嵌套在 axios 调用中的数据。当我访问数据的第一级（附加 ss 中的menuItems）时，我能够进入第一组对象及其后续子对象。我也能够从这些孩子 (submenus) 返回数据，但我无法分配/获取submenus 中的数据。我的 vue 变量返回undefined。

根据我以前的经验（以及互联网告诉我的内容），我应该能够正常访问这些数据...我很困惑为什么我的变量返回 undefined 但我的 v-for 返回数据作为对象数组。

截图见图片 [1]：https://i.stack.imgur.com/0iq38.png

Vue 模板

<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>

脚本

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 片段

[
  {
    "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"
      },
...}]

【问题讨论】：

submenus 属性是单个项目的属性。所以response.data[0].submenus、response.data[1].submenus 等等。response.data 上没有直接的submenus 属性。
所以你的内部循环应该类似于v-for="(subitem, index) of item.submenus"。
哇，好吧，我之前完全把它搞砸了……这把我搞砸了！哈哈谢谢你的理智检查，我应该知道这是我犯的一个愚蠢的错误！

标签： json vue.js axios

【解决方案1】：

子菜单属性是单个项目的属性。所以 response.data[0].submenus、response.data[1].submenus等。没有直接在 response.data 上的子菜单属性。

所以你的内部循环应该类似于 v-for="(subitem, index) of item.submenus”。

-裙子

我看代码太久了，哎呀！

【讨论】：