解决:Vue获取后端传送的Map类型的数据,获取成功,无法调用!

一个关于导航栏的坑!(自己基础薄弱~)

自己挖的一个大坑,关于后端往前端传值的坑!

前后端交互没问题,数据正常交互。

突然!后端传送过来的一个 map集合,获取成功了,但是无法调用,数据就在眼前,想通过 v-for 渲染,就是调不出来。

经过大神解惑,map的原理是 K V ,映射关系,调用的时候是 map.key

问题重现:

后端传送过来的map数据是 这样的:   这尼玛就是一个对象啊,才疏学浅,调了半天,白搭

data: {"导航" : ["内容a","内容b","内容c"],"导航2" : ["c++","java","aython"] } 


假设此时想要获取到 -- 导航 --,这两个字,是获取不到的,我是试了很久,绕晕了,后来问了问了大神,人家说:

就假设是如上的数据(后端返回的 Map类型数据),想要获取的话 只能是  data.导航,但是这么着获取的不是 -- 导航 --两个字,而是后面的数组,而且中文会出问题,最好是英文;

后来从后端找问题,最后发现  错误在这里

 serviceImpl的方法中,关于回传返回值这里

出错版:

       Map resMap = new HashMap();
        for(int i=0;i<list.size();i++) {
            String groupName = list.get(i).getGroupName();
            List<String> items = Arrays.asList(list.get(i).getNames().split(","));
           
            map.put(groupName,items);
            resMap.add(map);
        }
         
        return resMap;

 

上述代码是把需要的内容返回成功了,但是 groupName  是中文的啊喂!
调用的时候 data."汉字" 那不是扯犊子吗?前端读取不到这么调用的数据


改正版:
 List<Map> resMap = new ArrayList<Map>();
        for(int i=0;i<list.size();i++) {
            String groupName= list.get(i).getGroupName);
            List<String> names = Arrays.asList(list.get(i).getNames().split(","));
            Map map = new HashMap();
            map.put("id",i);
            map.put("groups",groupName);
            map.put("items",names);
            resMap.add(map);
        }
        return resMap;

正确的数据传送过来了:  这才是数组啊,可以用 . 访问

data: [{groups: "编程", id: 0,items:["Python", "Java","C++"]},{groups: "运动", id: 1,items:["滑雪", "爬山","敲代码"]}]

此时想要v-for 调用

v-for="item in navList"

item.id     // 0

item.groups   // 编程

  • 7
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值