Vue中向数组push时报Cannot read properties of undefined错误如何解决

• forEach 回调使用普通函数声明，内部this指向偏移，不再指向Vue实例，无法访问thumbnails属性，这是你报错的直接原因。
• video_thumbnail 在if块内部用const声明，属于块级作用域变量，if块外无法访问，即便this指向正确也会抛出变量未定义的错误。
• 模板内所有循环生成的img都绑定了同一个thumbnail变量，即便拿到了正确地址，所有视频也会显示同一张缩略图。
• 不需要通过操作DOM的方式获取youtube-id，你本身就持有videos源数组，直接遍历数组拿id性能更高，也不会出现DOM未渲染的时序问题。

最简方案（无需额外处理逻辑，直接在模板拼接地址） #

模板代码：

<div class="videos">
  <div v-for="(video, index) in videos" :key="index" class="video-item">
    <div @click="play(video.id)">
     <img :src="`https://img.youtube.com/vi/${video.id}/maxresdefault.jpg`" :width="420" :height="240" alt="视频缩略图" />
    </div>
  </div>
</div>

该方案不需要额外在data里定义缩略图相关变量，也不需要编写获取缩略图的方法，代码量最少。如果你的站点是HTTP协议，把地址前缀改成HTTP即可。

预存缩略图到数组的方案 #

如果你需要提前把所有缩略图地址存储到数组中使用，可按如下修改：

逻辑代码： #

data(){
  return {
    thumbnails: []
   }
},
methods: {
   getVideoThumbNails(){
      // 直接遍历原videos数组，无需操作DOM
      this.videos.forEach(video => {
        const youtubeId = video.id
        if (youtubeId.length === 11) {
          const thumbnail = `https://img.youtube.com/vi/${youtubeId}/maxresdefault.jpg`
          this.thumbnails.push(thumbnail)
        } else {
          // 不符合ID规则时可推入默认占位图地址
          this.thumbnails.push('')
        }
     })
   }
},
mounted(){
 this.getVideoThumbNails() 
}

模板代码修改img的src绑定： #

<img :src="thumbnails[index]" :width="420" :height="240" alt="视频缩略图" />

内容的提问来源于stack exchange，提问作者ST80