Javascript Vue循环嵌套JSON问题

我在访问嵌套的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文件，这样我就可以通过循环获得Vue组件的小缩略图。当我像在Vue组件中那样编写代码时，我得到了TypeError：无法读取未定义的属性“smallTumbnail”

---

我的Vue代码有什么问题？如何从JSON文件中访问一个项目，这是进一步嵌套的？

好的，问题是JSON文件完全混合了。并非每个实例都有imageLinks，嵌套数据的数量也不尽相同。这就是为什么循环遇到没有ImageLink的嵌套时会中断。JSON文件被有意地洗牌，以使生活和编程更加困难

您应该使用：

<b-img v-if="res.volumeInfo.imageLinks" :src="res.volumeInfo.imageLinks.smallThumbnail"></b-img>

而不是

<b-img :src="res.volumeInfo.imageLinks.smallThumbnail"></b-img> 

---

这是您的问题中的一个输入错误，还是您实际上正在尝试访问SmallTumbMail而不使用v-for中的H字母？感谢您的捕获，它在代码中实际上是正确的，但在这里编写时出现了一个输入错误：您的响应是否返回了有效的json对象或字符串？我已经在JSFIDLE上测试了你的代码，效果很好。下面是JSON的URL:Can you show console.logres？就是这样！非常感谢。