插值表达式在多层v-for中无法输出想要的结果?

作者站长头像
站长
· 阅读数 6

相关代码

HTML代码

<main class="content" id="content">
  <div v-for="item1 in data">
    <div v-for="item2 in item1.items">
      {{ item2.images.large }}
    </div>
  </div>
</main> 

Vue代码

<script>
Vue.createApp({
  data() {
    return {
      "data": [
        {
          "items": [
            {
              "id": 899,
              "url": "http://bgm.tv/subject/899",
              "type": 2,
              "name": "名探偵コナン",
              "name_cn": "名侦探柯南",
              "summary": "",
              "air_date": "1996-01-08",
              "air_weekday": 1,
              "rating": {
                "total": 7086,
                "count": {
                  "1": 22,
                  "2": 7,
                  "3": 15,
                  "4": 44,
                  "5": 236,
                  "6": 836,
                  "7": 2184,
                  "8": 2107,
                  "9": 832,
                  "10": 803
                },
                "score": 7.6
              },
              "rank": 612,
              "images": {
                "large": "http://lain.bgm.tv/pic/cover/l/01/88/899_Q3F3X.jpg",
                "common": "http://lain.bgm.tv/pic/cover/c/01/88/899_Q3F3X.jpg",
                "medium": "http://lain.bgm.tv/pic/cover/m/01/88/899_Q3F3X.jpg",
                "small": "http://lain.bgm.tv/pic/cover/s/01/88/899_Q3F3X.jpg",
                "grid": "http://lain.bgm.tv/pic/cover/g/01/88/899_Q3F3X.jpg"
              },
              "collection": {
                "doing": 6343
              }
            },
            {
              "id": 323651,
              "url": "http://bgm.tv/subject/323651",
              "type": 2,
              "name": "くまクマ熊ベアーぱーんち!",
              "name_cn": "熊熊勇闯异世界 Punch!",
              "summary": "",
              "air_date": "2023-04-03",
              "air_weekday": 1,
              "rating": {
                "total": 320,
                "count": {
                  "1": 0,
                  "2": 5,
                  "3": 5,
                  "4": 25,
                  "5": 59,
                  "6": 160,
                  "7": 40,
                  "8": 18,
                  "9": 3,
                  "10": 5
                },
                "score": 5.9
              },
              "rank": 6406,
              "images": {
                "large": "http://lain.bgm.tv/pic/cover/l/4c/ee/323651_gE7eZ.jpg",
                "common": "http://lain.bgm.tv/pic/cover/c/4c/ee/323651_gE7eZ.jpg",
                "medium": "http://lain.bgm.tv/pic/cover/m/4c/ee/323651_gE7eZ.jpg",
                "small": "http://lain.bgm.tv/pic/cover/s/4c/ee/323651_gE7eZ.jpg",
                "grid": "http://lain.bgm.tv/pic/cover/g/4c/ee/323651_gE7eZ.jpg"
              },
              "collection": {
                "doing": 460
              }
            },
            {
              "id": 358569,
              "url": "http://bgm.tv/subject/358569",
              "type": 2,
              "name": "武林不二周刊",
              "name_cn": "武林不二周刊",
              "summary": "",
              "air_date": "2023-04-10",
              "air_weekday": 1,
              "rating": {
                "total": 1,
                "count": {
                  "1": 0,
                  "2": 0,
                  "3": 0,
                  "4": 0,
                  "5": 0,
                  "6": 0,
                  "7": 1,
                  "8": 0,
                  "9": 0,
                  "10": 0
                },
                "score": 7
              },
              "images": {
                "large": "http://lain.bgm.tv/pic/cover/l/a5/7b/358569_uPCKK.jpg",
                "common": "http://lain.bgm.tv/pic/cover/c/a5/7b/358569_uPCKK.jpg",
                "medium": "http://lain.bgm.tv/pic/cover/m/a5/7b/358569_uPCKK.jpg",
                "small": "http://lain.bgm.tv/pic/cover/s/a5/7b/358569_uPCKK.jpg",
                "grid": "http://lain.bgm.tv/pic/cover/g/a5/7b/358569_uPCKK.jpg"
              },
              "collection": {
                "doing": 10
              }
            },
            {
              "id": 365437,
              "url": "http://bgm.tv/subject/365437",
              "type": 2,
              "name": "君は放課後インソムニア",
              "name_cn": "放学后失眠的你",
              "summary": "",
              "air_date": "2023-04-10",
              "air_weekday": 1,
              "rating": {
                "total": 1117,
                "count": {
                  "1": 3,
                  "2": 4,
                  "3": 3,
                  "4": 11,
                  "5": 28,
                  "6": 132,
                  "7": 357,
                  "8": 466,
                  "9": 76,
                  "10": 37
                },
                "score": 7.4
              },
              "rank": 1125,
              "images": {
                "large": "http://lain.bgm.tv/pic/cover/l/0e/c3/365437_O84Is.jpg",
                "common": "http://lain.bgm.tv/pic/cover/c/0e/c3/365437_O84Is.jpg",
                "medium": "http://lain.bgm.tv/pic/cover/m/0e/c3/365437_O84Is.jpg",
                "small": "http://lain.bgm.tv/pic/cover/s/0e/c3/365437_O84Is.jpg",
                "grid": "http://lain.bgm.tv/pic/cover/g/0e/c3/365437_O84Is.jpg"
              },
              "collection": {
                "doing": 3258
              }
            },
            {
              "id": 366331,
              "url": "http://bgm.tv/subject/366331",
              "type": 2,
              "name": "アリス・ギア・アイギス EXPANSION",
              "name_cn": "机战少女 Alice Expansion",
              "summary": "",
              "air_date": "2023-04-03",
              "air_weekday": 1,
              "rating": {
                "total": 243,
                "count": {
                  "1": 4,
                  "2": 4,
                  "3": 5,
                  "4": 16,
                  "5": 55,
                  "6": 88,
                  "7": 54,
                  "8": 9,
                  "9": 3,
                  "10": 5
                },
                "score": 5.8
              },
              "rank": 6425,
              "images": {
                "large": "http://lain.bgm.tv/pic/cover/l/c0/e6/366331_l3w8h.jpg",
                "common": "http://lain.bgm.tv/pic/cover/c/c0/e6/366331_l3w8h.jpg",
                "medium": "http://lain.bgm.tv/pic/cover/m/c0/e6/366331_l3w8h.jpg",
                "small": "http://lain.bgm.tv/pic/cover/s/c0/e6/366331_l3w8h.jpg",
                "grid": "http://lain.bgm.tv/pic/cover/g/c0/e6/366331_l3w8h.jpg"
              },
              "collection": {
                "doing": 332
              }
            },
            {
              "id": 378101,
              "url": "http://bgm.tv/subject/378101",
              "type": 2,
              "name": "異世界はスマートフォンとともに。2",
              "name_cn": "带着智能手机闯荡异世界。 第二季",
              "summary": "",
              "air_date": "2023-04-03",
              "air_weekday": 1,
              "rating": {
                "total": 363,
                "count": {
                  "1": 17,
                  "2": 19,
                  "3": 25,
                  "4": 73,
                  "5": 127,
                  "6": 63,
                  "7": 15,
                  "8": 7,
                  "9": 3,
                  "10": 14
                },
                "score": 4.9
              },
              "rank": 7549,
              "images": {
                "large": "http://lain.bgm.tv/pic/cover/l/98/25/378101_XGh49.jpg",
                "common": "http://lain.bgm.tv/pic/cover/c/98/25/378101_XGh49.jpg",
                "medium": "http://lain.bgm.tv/pic/cover/m/98/25/378101_XGh49.jpg",
                "small": "http://lain.bgm.tv/pic/cover/s/98/25/378101_XGh49.jpg",
                "grid": "http://lain.bgm.tv/pic/cover/g/98/25/378101_XGh49.jpg"
              },
              "collection": {
                "doing": 398
              }
            },
            {
              "id": 390712,
              "url": "http://bgm.tv/subject/390712",
              "type": 2,
              "name": "彼女が公爵邸に行った理由",
              "name_cn": "她去公爵家的理由",
              "summary": "",
              "air_date": "2023-04-10",
              "air_weekday": 1,
              "rating": {
                "total": 113,
                "count": {
                  "1": 4,
                  "2": 2,
                  "3": 4,
                  "4": 4,
                  "5": 17,
                  "6": 50,
                  "7": 20,
                  "8": 7,
                  "9": 3,
                  "10": 2
                },
                "score": 5.9
              },
              "rank": 5740,
              "images": {
                "large": "http://lain.bgm.tv/pic/cover/l/56/50/390712_QjcQp.jpg",
                "common": "http://lain.bgm.tv/pic/cover/c/56/50/390712_QjcQp.jpg",
                "medium": "http://lain.bgm.tv/pic/cover/m/56/50/390712_QjcQp.jpg",
                "small": "http://lain.bgm.tv/pic/cover/s/56/50/390712_QjcQp.jpg",
                "grid": "http://lain.bgm.tv/pic/cover/g/56/50/390712_QjcQp.jpg"
              },
              "collection": {
                "doing": 345
              }
            },
            {
              "id": 406471,
              "url": "http://bgm.tv/subject/406471",
              "type": 2,
              "name": "女神有点灵",
              "name_cn": "",
              "summary": "",
              "air_date": "2023-04-24",
              "air_weekday": 1,
              "rating": {
                "total": 5,
                "count": {
                  "1": 1,
                  "2": 0,
                  "3": 0,
                  "4": 1,
                  "5": 0,
                  "6": 0,
                  "7": 0,
                  "8": 0,
                  "9": 1,
                  "10": 2
                },
                "score": 6.8
              },
              "images": {
                "large": "http://lain.bgm.tv/pic/cover/l/25/7e/406471_2PwK7.jpg",
                "common": "http://lain.bgm.tv/pic/cover/c/25/7e/406471_2PwK7.jpg",
                "medium": "http://lain.bgm.tv/pic/cover/m/25/7e/406471_2PwK7.jpg",
                "small": "http://lain.bgm.tv/pic/cover/s/25/7e/406471_2PwK7.jpg",
                "grid": "http://lain.bgm.tv/pic/cover/g/25/7e/406471_2PwK7.jpg"
              },
              "collection": {
                "doing": 5
              }
            },
            {
              "id": 407713,
              "url": "http://bgm.tv/subject/407713",
              "type": 2,
              "name": "絆のアリル",
              "name_cn": "绊之Allele",
              "summary": "",
              "air_date": "2023-04-03",
              "air_weekday": 1,
              "rating": {
                "total": 177,
                "count": {
                  "1": 38,
                  "2": 14,
                  "3": 30,
                  "4": 40,
                  "5": 26,
                  "6": 16,
                  "7": 5,
                  "8": 1,
                  "9": 2,
                  "10": 5
                },
                "score": 3.7
              },
              "rank": 7690,
              "images": {
                "large": "http://lain.bgm.tv/pic/cover/l/c9/1b/407713_jHaH4.jpg",
                "common": "http://lain.bgm.tv/pic/cover/c/c9/1b/407713_jHaH4.jpg",
                "medium": "http://lain.bgm.tv/pic/cover/m/c9/1b/407713_jHaH4.jpg",
                "small": "http://lain.bgm.tv/pic/cover/s/c9/1b/407713_jHaH4.jpg",
                "grid": "http://lain.bgm.tv/pic/cover/g/c9/1b/407713_jHaH4.jpg"
              },
              "collection": {
                "doing": 138
              }
            },
            {
              "id": 408013,
              "url": "http://bgm.tv/subject/408013",
              "type": 2,
              "name": "デッドマウント・デスプレイ",
              "name_cn": "亡骸游戏",
              "summary": "",
              "air_date": "2023-04-10",
              "air_weekday": 1,
              "rating": {
                "total": 446,
                "count": {
                  "1": 1,
                  "2": 4,
                  "3": 9,
                  "4": 17,
                  "5": 58,
                  "6": 159,
                  "7": 159,
                  "8": 30,
                  "9": 2,
                  "10": 7
                },
                "score": 6.3
              },
              "rank": 5497,
              "images": {
                "large": "http://lain.bgm.tv/pic/cover/l/67/45/408013_5Z5Q3.jpg",
                "common": "http://lain.bgm.tv/pic/cover/c/67/45/408013_5Z5Q3.jpg",
                "medium": "http://lain.bgm.tv/pic/cover/m/67/45/408013_5Z5Q3.jpg",
                "small": "http://lain.bgm.tv/pic/cover/s/67/45/408013_5Z5Q3.jpg",
                "grid": "http://lain.bgm.tv/pic/cover/g/67/45/408013_5Z5Q3.jpg"
              },
              "collection": {
                "doing": 1349
              }
            },
            {
              "id": 411977,
              "url": "http://bgm.tv/subject/411977",
              "type": 2,
              "name": "忍たま乱太郎 第31シリーズ",
              "name_cn": "忍者乱太郎 第31季",
              "summary": "",
              "air_date": "2023-04-03",
              "air_weekday": 1,
              "images": {
                "large": "http://lain.bgm.tv/pic/cover/l/d8/57/411977_C68Kz.jpg",
                "common": "http://lain.bgm.tv/pic/cover/c/d8/57/411977_C68Kz.jpg",
                "medium": "http://lain.bgm.tv/pic/cover/m/d8/57/411977_C68Kz.jpg",
                "small": "http://lain.bgm.tv/pic/cover/s/d8/57/411977_C68Kz.jpg",
                "grid": "http://lain.bgm.tv/pic/cover/g/d8/57/411977_C68Kz.jpg"
              },
              "collection": {
                "doing": 3
              }
            },
            {
              "id": 424450,
              "url": "http://bgm.tv/subject/424450",
              "type": 2,
              "name": "逆天战纪",
              "name_cn": "",
              "summary": "",
              "air_date": "2023-04-03",
              "air_weekday": 1,
              "rating": {
                "total": 3,
                "count": {
                  "1": 2,
                  "2": 0,
                  "3": 1,
                  "4": 0,
                  "5": 0,
                  "6": 0,
                  "7": 0,
                  "8": 0,
                  "9": 0,
                  "10": 0
                },
                "score": 1.7
              },
              "images": {
                "large": "http://lain.bgm.tv/pic/cover/l/05/ca/424450_mg2G4.jpg",
                "common": "http://lain.bgm.tv/pic/cover/c/05/ca/424450_mg2G4.jpg",
                "medium": "http://lain.bgm.tv/pic/cover/m/05/ca/424450_mg2G4.jpg",
                "small": "http://lain.bgm.tv/pic/cover/s/05/ca/424450_mg2G4.jpg",
                "grid": "http://lain.bgm.tv/pic/cover/g/05/ca/424450_mg2G4.jpg"
              },
              "collection": {
                "doing": 4
              }
            },
            {
              "id": 426154,
              "url": "http://bgm.tv/subject/426154",
              "type": 2,
              "name": "ぼさにまる",
              "name_cn": "",
              "summary": "",
              "air_date": "2023-04-03",
              "air_weekday": 1,
              "rating": {
                "total": 3,
                "count": {
                  "1": 0,
                  "2": 0,
                  "3": 0,
                  "4": 0,
                  "5": 0,
                  "6": 1,
                  "7": 1,
                  "8": 0,
                  "9": 1,
                  "10": 0
                },
                "score": 7.3
              },
              "images": {
                "large": "http://lain.bgm.tv/pic/cover/l/91/bc/426154_OwOQq.jpg",
                "common": "http://lain.bgm.tv/pic/cover/c/91/bc/426154_OwOQq.jpg",
                "medium": "http://lain.bgm.tv/pic/cover/m/91/bc/426154_OwOQq.jpg",
                "small": "http://lain.bgm.tv/pic/cover/s/91/bc/426154_OwOQq.jpg",
                "grid": "http://lain.bgm.tv/pic/cover/g/91/bc/426154_OwOQq.jpg"
              },
              "collection": {
                "doing": 8
              }
            },
            {
              "id": 427943,
              "url": "http://bgm.tv/subject/427943",
              "type": 2,
              "name": "はなかっぱ 第14期",
              "name_cn": "花样河童 第14季",
              "summary": "",
              "air_date": "2023-04-03",
              "air_weekday": 1,
              "images": null,
              "collection": {
                "doing": 1
              }
            }
          ],
          "weekday": {
            "en": "Mon",
            "cn": "星期一",
            "ja": "月耀日",
            "id": 1
          },
        }
      ]
    }
  }
}).mount('#content');
</script>

按理来说应该输出 items 数组里面的 imageslarge 的值,但是浏览器却报错。

Uncaught TypeError: Cannot read properties of null (reading 'large')
    at eval (eval at compileToFunction (vue@3:15199:20), <anonymous>:14:98)
    at renderList (vue@3:4197:18)
    at eval (eval at compileToFunction (vue@3:15199:20), <anonymous>:13:67)
    at renderList (vue@3:4197:18)
    at Proxy.render (eval at compileToFunction (vue@3:15199:20), <anonymous>:11:63)
    at renderComponentRoot (vue@3:2287:18)
    at ReactiveEffect.componentUpdateFn [as fn] (vue@3:7105:48)
    at ReactiveEffect.run (vue@3:497:21)
    at instance.update (vue@3:7218:53)
    at setupRenderEffect (vue@3:7226:7)

不加 large 直接 item2.images 可以正常输出 images 内的所有内容。刚接触 Vue,请大神赐教

回复
1个回答
avatar
test
2024-07-01

使用可选链的方式来输出到模板就好了。

<main class="content" id="content">
  <div v-for="item1 in data">
    <div v-for="item2 in item1.items">
-      {{ item2.images.large }}
+      {{ item2.images?.large }}
    </div>
  </div>
</main> 

主要原因是你声明的 data 数组中的一项值其中的 images 值为 null,而你直接输出 images 为什么可以呢,因为输出的 null 不会展示在 页面当中。answer image

稍作修改你就明白了:answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容