Question

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

根据我以前的经验（以及互联网告诉我的信息），我应该能够正常访问此数据...我很困惑为什么变量返回undefined但我的{{1} }以对象数组的形式返回数据。

查看图像以获取截图 [1]：https://i.stack.imgur.com/0iq38.png

Vue模板

v-for

脚本

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

JSON代码段

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]
        }))
      });
    },
  }

Answer 1

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

因此，您的内部循环应类似于v-for =“（subitem，index）of item.submenus”。

-小偷

我在看代码的时间太长了，哎呀！

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

1 个答案: