插值表达式在多层v-for中无法输出想要的结果？
相关代码
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 数组里面的 images 的 large 的值，但是浏览器却报错。
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，请大神赐教
回答：
使用可选链的方式来输出到模板就好了。
<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 不会展示在 页面当中。
稍作修改你就明白了：
以上是 插值表达式在多层v-for中无法输出想要的结果？ 的全部内容， 来源链接： utcz.com/p/934503.html
