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

news/2024/7/10 2:03:22 标签: 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   // 编程


http://www.niftyadmin.cn/n/1455782.html

相关文章

spring boot自动注入出现Consider defining a bean of type 'xxx' in your configuration

话不多说&#xff0c;因为我只是这样错的&#xff01; 兄dei&#xff0c;去看看service包下面的serviceImpl 这个类&#xff0c;看看有没有继承service接口&#xff0c;如果没有继承&#xff0c;继承一下就行了&#xff01;&#xff01;&#xff01;

警惕可执行文件:三类危险TXT类型文件

假如您收到的邮件附件中有一个看起来是这样的文件&#xff1a;QQ 放送.txt&#xff0c;您是不是认为它肯定是纯文本文件?我要告诉您&#xff0c;不一定!它的实际文件名可以是QQ 放送.txt{3050F4D8-98B5-11CF-BB82-00AA00BDCE0B}.{3050F4D8-98B5-11CF-BB82-00AA00BDCE0B}在注册…

网络安全没保障 40%多英国人不敢网上购物

据国外媒体报道&#xff0c;美国电子支付技术供应商CyberSource近日指出&#xff0c;超过40%的英国人由于担心安全问题而拒绝网上购物。 对此&#xff0c;CyberSource常务董事西蒙斯托克斯(Simon Stokes)称&#xff1a;“媒体关于网络被入侵的报道比比皆是&#xff0c;一些消费…

VC++6.0 MFC 菜单 子选项 能否被点击 单文档程序

创建一个menu 创建菜单项 自动生成其ID 如IDR_MENU1 不用创建类 创建两个子选项 2.打开mainFrame类 找到 OnCreate函数 // TODO: Delete these three lines if you dont want the toolbar to // be dockable this->SetMenu(NULL); // 设置当前菜单为空 CMen…

卡巴斯基安全公告:2008恶意软件发展情况

近日&#xff0c;卡巴斯基实验室发表题为《卡巴斯基安全公告&#xff1a;2008恶意软件发展情况》的报告&#xff0c;该报告由公司高级分析师撰写。 据悉&#xff0c;通过卡巴斯基安全网络所收集到的数据也是首次被用在这样的年度报告中&#xff0c;并作为论述的依据。这项新技术…

解决 Vue+SpringBoot中axios发送post请求 控制台报错 404,后端能接收到数据!

emmmmmmmm&#xff0c;昨天写毕设 &#xff0c;不小心踩了这个坑~ 由于是后端新建的一个controller&#xff0c;导致前端报404错误&#xff0c;但是后端接收数据成功&#xff0c;还能读取数据库&#xff0c;让我很郁闷&#xff01; 因为前面写的代码都没问题&#xff0c;后来…

18位身份证校验位算法

package day05;/*** 身份证第18位计算法 身份证第18位&#xff08;校验码&#xff09;的计算方法* * 1、将前面的身份证号码17位数分别乘以不同的 系数。 从第一位到第十七位的系数分别为&#xff1a;* 7&#xff0d;9&#xff0d;10&#xff0d;5&#xff0d;8&#xff0d;4&a…

解决 Zookeeper集群启动失败,提示 Error contacting service. It is probably not running.

刚学到zookeeper 记录一下出现的错误&#xff0c;死活开启不了服务&#xff0c;经查阅后发现是防火墙问题。&#xff08;关闭防火墙命令在文章底部&#xff09; 如果设置了SSH免密登录 则在zoo.cig中如下设置; 如果没有设置ssh免密登录&#xff0c;把“”后面设置为IP:通信端…