51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 1570|回复: 5
打印 上一主题 下一主题

vue v-for循环map时获取不到元素

[复制链接]
  • TA的每日心情
    擦汗
    前天 09:07
  • 签到天数: 527 天

    连续签到: 4 天

    [LV.9]测试副司令

    跳转到指定楼层
    #
    发表于 2020-9-4 11:35:09 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
    1测试积点
    数据是这样的,map里面嵌套了一个子map subMenu,但是subMenu的右侧显示为Object
    v-for的时候可以获取到subMenu的数据,用item.menu的时候是获取不到对应的值的。
    如果不用item.menu而是直接用menu却又可以获取到。请看前端代码
    1. <el-menu background-color="#252526" text-color="#fff" active-text-color="#ffd04b">
    2.          <!-- 一级菜单区域 -->
    3.          <el-submenu :index="item.menu_id + ''" v-for="item in menuList" :key="item.menu_id">
    4.            <!-- 一级菜单模板区域 -->
    5.            <template slot="title">
    6.              <i class="el-icon-location"></i>
    7.              <span>{{item.menu}}</span>
    8.            </template>
    9.            <!-- 二级菜单区域 -->
    10.            <el-menu-item :index="subItem.menu_id + ''" v-for="subItem in item.subMenu" :key="subItem.menu_id">
    11.              <template slot="title">
    12.                <i class="el-icon-location"></i>
    13.                <span>{{subItem.menu}}</span>
    14.              </template>
    15.            </el-menu-item>
    16.          </el-submenu>
    17.        </el-menu>

    18. js代码:

    19. async getMenuList() {
    20.      this.$http.get('/manager/getMenu').then(
    21.        response => {
    22.            if(response.data.code!==200) {
    23.                return this.$message.error("左侧菜单获取失败!");
    24.            }
    25.            this.menuList = response.data.data;
    26.            console.log(this.menuList);
    27.        },
    28.        error => {
    29.          return this.$message.error("左侧菜单获取失败!");
    30.        }
    31.      );
    32.    }
    复制代码
    中如果为{{subItem}}则页面显示效果为

    中如果为{{subItem.menu}}则页面显示效果为

    是没有办法获取到相应的值。
    各位大神们,请问这是什么原因导致的?如何解决?


    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏
    回复

    使用道具 举报

  • TA的每日心情
    奋斗
    前天 07:28
  • 签到天数: 2812 天

    连续签到: 5 天

    [LV.Master]测试大本营

    5#
    发表于 2020-9-7 13:08:10 | 只看该作者
    要好好理一下整个使用方式
    回复

    使用道具 举报

  • TA的每日心情
    擦汗
    2024-9-30 15:02
  • 签到天数: 751 天

    连续签到: 2 天

    [LV.10]测试总司令

    4#
    发表于 2020-9-7 11:46:35 | 只看该作者
    回复

    使用道具 举报

  • TA的每日心情
    奋斗
    前天 10:10
  • 签到天数: 1516 天

    连续签到: 5 天

    [LV.Master]测试大本营

    3#
    发表于 2020-9-7 10:20:01 | 只看该作者
    用了vue就用配套的v-for啊
    回复

    使用道具 举报

  • TA的每日心情
    奋斗
    前天 08:59
  • 签到天数: 1801 天

    连续签到: 5 天

    [LV.Master]测试大本营

    2#
    发表于 2020-9-7 09:39:10 | 只看该作者
    回复

    使用道具 举报

  • TA的每日心情
    奋斗
    2024-10-22 14:23
  • 签到天数: 1007 天

    连续签到: 1 天

    [LV.10]测试总司令

    1#
    发表于 2020-9-7 09:26:20 | 只看该作者
    可以参考这个链接的回答看看https://ask.csdn.net/questions/1077598
    回复

    使用道具 举报

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

    GMT+8, 2024-11-17 19:27 , Processed in 0.064567 second(s), 22 queries .

    Powered by Discuz! X3.2

    © 2001-2024 Comsenz Inc.

    快速回复 返回顶部 返回列表