v-for循环嵌套问题

Question

我想：

第一次v-for循环遍历gameTypes，生成9个“框”
第二次v-for循环遍历“框”中的对象

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

"gameTypes": [

{
  "RPG": [
    {
      "name": "魔兽世界",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/08/27/2019082722338398.jpg"
    },
    {
      "name": "赛博朋克2077",
      "imgUrl": "https://imgs.ali213.net/Spe/2013/01/15/xu005.jpg"
    },
    {
      "name": "辐射5",
      "imgUrl": "https://imgs.ali213.net/Spe/2017/01/12/2017011223252599.jpg"
    },
    {
      "name": "刀剑神域：彼岸游境",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/04/02/2019040232842998.jpg"
    },
    {
      "name": "死亡终结 re;Quest 2",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/07/10/20190710111620308.jpg"
    },
    {
      "name": "深不可测的公馆",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/01/10/2019011043526448.jpg"
    }
  ],
  "ACT": [
    {
      "name": "一拳超人：无名英雄",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/06/27/2019062791404831.jpg"
    },
    {
      "name": "月姬格斗",
      "imgUrl": "https://imgs.ali213.net/Spe/2016/04/06/2016040643104250.jpg"
    },
    {
      "name": "任天堂全明星大乱斗",
      "imgUrl": "https://imgs.ali213.net/Spe/2014/09/26/2014092623123753.jpg"
    },
    {
      "name": "真人快打9",
      "imgUrl": "https://imgs.ali213.net/Spe/2013/07/11/kuaida.jpg"
    },
    {
      "name": "假面骑士：巅峰战士",
      "imgUrl": "https://imgs.ali213.net/Spe/2017/10/19/2017101923631605.jpg"
    },
    {
      "name": "火影忍者：究极风暴",
      "imgUrl": "https://imgs.ali213.net/Spe/2017/09/12/2017091245724703.jpg"
    }
  ],
  "AVG": [
    {
      "name": "刺客信条",
      "imgUrl": "https://imgs.ali213.net/Spe/2014/01/13/Assassins.jpg"
    },
    {
      "name": "生化危机4",
      "imgUrl": "https://imgs.ali213.net/Spe/Logo/Biohazard%20401.jpg"
    },
    {
      "name": "指环王：北方战争",
      "imgUrl": "https://imgs.ali213.net/Spe/Logo/lrwn_logo2.jpg"
    },
    {
      "name": "黑镜3",
      "imgUrl": "https://imgs.ali213.net/Spe/Logo/Black-Mirror3.jpg"
    },
    {
      "name": "哈利波特与死亡圣器",
      "imgUrl": "https://imgs.ali213.net/Spe/Logo/20110629162933939.jpg"
    },
    {
      "name": "生化危机：启示录",
      "imgUrl": "https://imgs.ali213.net/Spe/2013/05/21/qishi.jpg"
    }
  ],
  "RTS": [
    {
      "name": "三国群英传8",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/08/29/20190829114022237.jpg"
    },
    {
      "name": "要塞：军阀之战",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/06/15/2019061592152330.jpg"
    },
    {
      "name": "文明7",
      "imgUrl": "https://imgs.ali213.net/Spe/2016/11/08/2016110852646491.jpg"
    },
    {
      "name": "要塞：军阀之战",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/06/15/2019061592152330.jpg"
    },
    {
      "name": "荣耀战场：帝国",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/08/01/2019080145535521.jpg"
    },
    {
      "name": "刀塔霸业",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/06/18/2019061892621785.jpg"
    }
  ],
  "PZL": [
    {
      "name": "魔兽世界",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/08/27/2019082722338398.jpg"
    },
    {
      "name": "赛博朋克2077",
      "imgUrl": "https://imgs.ali213.net/Spe/2013/01/15/xu005.jpg"
    },
    {
      "name": "辐射5",
      "imgUrl": "https://imgs.ali213.net/Spe/2017/01/12/2017011223252599.jpg"
    },
    {
      "name": "刀剑神域：彼岸游境",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/04/02/2019040232842998.jpg"
    },
    {
      "name": "死亡终结 re;Quest 2",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/07/10/20190710111620308.jpg"
    },
    {
      "name": "深不可测的公馆",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/01/10/2019011043526448.jpg"
    }
  ],
  "RAC": [
    {
      "name": "一拳超人：无名英雄",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/06/27/2019062791404831.jpg"
    },
    {
      "name": "月姬格斗",
      "imgUrl": "https://imgs.ali213.net/Spe/2016/04/06/2016040643104250.jpg"
    },
    {
      "name": "任天堂全明星大乱斗",
      "imgUrl": "https://imgs.ali213.net/Spe/2014/09/26/2014092623123753.jpg"
    },
    {
      "name": "真人快打9",
      "imgUrl": "https://imgs.ali213.net/Spe/2013/07/11/kuaida.jpg"
    },
    {
      "name": "假面骑士：巅峰战士",
      "imgUrl": "https://imgs.ali213.net/Spe/2017/10/19/2017101923631605.jpg"
    },
    {
      "name": "火影忍者：究极风暴",
      "imgUrl": "https://imgs.ali213.net/Spe/2017/09/12/2017091245724703.jpg"
    }
  ],
  "LVG": [
    {
      "name": "魔兽世界",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/08/27/2019082722338398.jpg"
    },
    {
      "name": "赛博朋克2077",
      "imgUrl": "https://imgs.ali213.net/Spe/2013/01/15/xu005.jpg"
    },
    {
      "name": "辐射5",
      "imgUrl": "https://imgs.ali213.net/Spe/2017/01/12/2017011223252599.jpg"
    },
    {
      "name": "刀剑神域：彼岸游境",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/04/02/2019040232842998.jpg"
    },
    {
      "name": "死亡终结 re;Quest 2",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/07/10/20190710111620308.jpg"
    },
    {
      "name": "深不可测的公馆",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/01/10/2019011043526448.jpg"
    }
  ],
  "SPG": [
    {
      "name": "一拳超人：无名英雄",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/06/27/2019062791404831.jpg"
    },
    {
      "name": "月姬格斗",
      "imgUrl": "https://imgs.ali213.net/Spe/2016/04/06/2016040643104250.jpg"
    },
    {
      "name": "任天堂全明星大乱斗",
      "imgUrl": "https://imgs.ali213.net/Spe/2014/09/26/2014092623123753.jpg"
    },
    {
      "name": "真人快打9",
      "imgUrl": "https://imgs.ali213.net/Spe/2013/07/11/kuaida.jpg"
    },
    {
      "name": "假面骑士：巅峰战士",
      "imgUrl": "https://imgs.ali213.net/Spe/2017/10/19/2017101923631605.jpg"
    },
    {
      "name": "火影忍者：究极风暴",
      "imgUrl": "https://imgs.ali213.net/Spe/2017/09/12/2017091245724703.jpg"
    }
  ],
  "FPS": [
    {
      "name": "魔兽世界",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/08/27/2019082722338398.jpg"
    },
    {
      "name": "赛博朋克2077",
      "imgUrl": "https://imgs.ali213.net/Spe/2013/01/15/xu005.jpg"
    },
    {
      "name": "辐射5",
      "imgUrl": "https://imgs.ali213.net/Spe/2017/01/12/2017011223252599.jpg"
    },
    {
      "name": "刀剑神域：彼岸游境",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/04/02/2019040232842998.jpg"
    },
    {
      "name": "死亡终结 re;Quest 2",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/07/10/20190710111620308.jpg"
    },
    {
      "name": "深不可测的公馆",
      "imgUrl": "https://imgs.ali213.net/Spe/2019/01/10/2019011043526448.jpg"
    }
  ]
}

],

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

<div v-for="(k, i) in obj" :key="i">
    <img v-for="src in k" :key="src.imgUrl" :src="src.imgUrl" style="width:100px;height:100px;" />
</div>

这种问题有啥好问的？

Answer 2

<template v-for="(arr,index) in gameTypes">
    //这是框框
    <div :key="index">
       <template v-for="(obj,index) in arr">
         // 这是框中的对象
         <div :key="index">
            {{obj.name}}
            {{obj.imgUrl}}
         </div>
       </template>
    </div>
</template>

这种问题确实没哈好问的