解決：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   // 編程