Vue循环嵌套JSON故障
Vue循环嵌套JSON故障
提问于 2020-01-27 19:16:46
我在访问嵌套的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"
}
}
}
]
}..And这里是我的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文件访问项，这是嵌套的第一步？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-27 23:09:27
你应该使用：
<b-img v-if="res.volumeInfo.imageLinks" :src="res.volumeInfo.imageLinks.smallThumbnail"></b-img>而不是
<b-img :src="res.volumeInfo.imageLinks.smallThumbnail"></b-img> Stack Overflow用户
发布于 2020-01-27 21:31:24
好的，问题是JSON文件是完全混合的。并不是每个实例都有imageLinks，嵌套数据的数量也不同。这就是为什么当循环遇到一个没有"imageLinks“的嵌套时会中断的原因。为了使生活(和编程)变得更加困难，对JSON文件进行了有意的调整。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59937507
复制相关文章
相似问题
腾讯云开发者
