Question

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

我正在向其发送youtube播放列表json返回。我试图在vfor循环中绑定缩略图的URL，但是，它一直在说该值未定义。但是，我在控制台中记录了响应，而且响应在那里。知道是什么问题吗？这是我的代码：（本地主机只是使用我的API密钥获取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是否使用它，然后在默认情况下回退。

vue v-for循环不读取json值

1 个答案: