访问嵌套的JSON文件时遇到一些问题。
这是一个较大的JSON文件的一小部分:
{
"first": "SOME_TEXT",
"second": 1,
"items": [
{
"volumeInfo": {
"first": "SOME_TEXT",
"second": [
"SOME_TEXT"
],
"imageLinks": {
"smallThumbnail": "http://books.google.com/books/content?id=hpTEDwAAQBAJ&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api",
"thumbnail": "http://books.google.com/books/content?id=hpTEDwAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api"
}
}
}
]
}
..这是我的Vue组件:
<template>
<div>
<b-container v-for="(res, index) in res.items" :key="index">
<!-- Img path from response -->
<b-img :src="res.volumeInfo.imageLinks.smallThumbnail"></b-img>
</b-container>
</div>
</template>
脚本:
<script>
export default {
name: 'Component',
data () {
return {
res: '',
}
},
mounted () {
fetch('API-URL-HERE')
.then(res => {
return res.json()
})
.then(res => {
this.res = res
})
}
}
</script>
我正在尝试循环一个大的JSON文件,以便可以通过循环将“ smallThumbnail”传递到Vue组件。当我在Vue组件中编写代码时,出现 TypeError:无法读取未定义的属性'smallTumbnail'
我的Vue代码怎么了?如何从JSON文件访问嵌套了一步的项目?
答案 0 :(得分:1)
您应该使用:
<b-img v-if="res.volumeInfo.imageLinks" :src="res.volumeInfo.imageLinks.smallThumbnail"></b-img>
代替
<b-img :src="res.volumeInfo.imageLinks.smallThumbnail"></b-img>
答案 1 :(得分:0)
好的,问题在于JSON文件完全混合了。并非每个实例都有imageLink,并且嵌套数据量也有所不同。这就是为什么循环遇到没有“ imageLinks”的嵌套时会中断的原因。故意对JSON文件进行了改组,以使工作(和编程)更加困难。