json - vue v-for循环不读取json值

Question

我对 Vue 有一个奇怪的问题。

我正在向它发送一个 youtube 播放列表 json 返回。我正在尝试在 vfor 循环中绑定(bind)缩略图的 URL，但是，它一直说该值未定义。但是，我在控制台中记录了响应，它就在那里。知道问题是什么吗？这是我的代码:(本地主机只是使用我的 API key 获取 youtube 列表。所有值都有效，除了 item.snippet.thumbnails.maxres.url 我从 vue 得到的错误是

[Vue 警告]:渲染错误:“TypeError:无法读取未定义的属性 'url'”

<template>
  <div id="app">
   <br>
    Click Image To See Video
            <div v-for="item in playlist">
    <a :href="'http://www.youtube.com/watch?v='+item.snippet.resourceId.videoId">
  <img :src="item.snippet.thumbnails.maxres.url" :alt="item.snippet.title">  
  </a>
  </div>

  </div>
</template>

<script>
import videoLink from './components/videoLink.vue';
import axios from 'axios';
import Vue from 'vue';
const registered = [];

export default {
  name: 'app',
    data: () => ({
    loaded: false,
    playlist: [],
    errors: [],
  }),
 created() {
    axios.get('http://localhost:1234')
      .then((response) => {
        console.log(response.data.items[0])      
        this.playlist = response.data.items;
        console.log(response.data.items[0].snippet.thumbnails.maxres.url)
        console.log(this.playlist)

        this.loaded = true;
      })
      .catch((e) => {
        this.errors.push(e);
      });
  },
  components: {
    videoLink
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Answer 1

数组中的第一项是否可能没有 maxres 属性？我阅读文档的方式是 maxres 可能对某些人可用，但不能保证在那里。

https://developers.google.com/youtube/v3/docs/thumbnails

也有一个默认对象，因此您可以检查 maxres 是否使用它，然后回退到默认值。