如何使用vue js在我的搜索结果youtube api中播放下一个视频？

<template>
  <div>
    <div v-for="(video, index) in videos" :key="index">
      <button @click="playVideo(video.id.videoId)">{{ video.snippet.title }}</button>
    </div>
    <iframe
      id="youtube-player"
      type="text/html"
      :src="`https://www.youtube.com/embed/${currentVideoId}?enablejsapi=1`"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [],
      currentVideoId: null,
      player: null,
    };
  },
  mounted() {
    this.loadVideos();
    window.onYouTubeIframeAPIReady = () => {
      this.player = new window.YT.Player('youtube-player', {
        events: {
          'onReady': this.onPlayerReady,
        },
      });
    };
  },
  methods: {
    loadVideos() {
      // 这里应该是调用YouTube API搜索视频的逻辑
      // 假设我们已经有了视频列表
      this.videos = [
        // ... 从YouTube API获取的视频列表
      ];
      if (this.videos.length > 0) {
        this.currentVideoId = this.videos[0].id.videoId;
      }
    },
    playVideo(videoId) {
      this.currentVideoId = videoId;
      if (this.player) {
        this.player.loadVideoById(videoId);
      }
    },
    onPlayerReady(event) {
      // 播放器准备就绪时的逻辑
    },
  },
};
</script>

<script src="https://www.youtube.com/iframe_api"></script>