Así que tengo un componente de búsqueda y el componente de búsqueda envía datos al componente reproductor principal. Envío una identificación de video y un objeto con 5 resultados de búsqueda a player.component.

 <template> <div class="mobile-screen"> <b-container> <search-component v-on:updateVideoId="updateVideoId($event)" v-on:playlist="playlist($event)" /> <youtube :video-id="videoId" ref="youtube" @playing="playing"></youtube> <button @click="playVideo">play</button> <button @click="stopVideo">stop</button> <button @click="nextVideo">next</button> <b-row> <b-col> <ul v-if="info"> <li v-for="(item, index) in info.items" :key="index.etag"> <p class="text">{{ item.snippet.videoId }}</p> </li> </ul> </b-col> </b-row> </b-container> </div> </template>

Entonces tengo acceso a videoId y al objeto de resultado de búsqueda. Pero quiero que mi reproductor pueda reproducir el siguiente video en mis resultados de búsqueda y no estoy seguro de cómo hacerlo.

 <script> import SearchComponent from "./SearchComponent.vue"; //import axios from "axios"; export default { components: { SearchComponent }, name: "PlayerComponent", props: { msg: String, }, data() { return { searchResult: null, videoId: "lG0Ys-2d4MA", }; }, mounted() {}, methods: { updateVideoId(payload) { this.videoId = payload; }, nextVideo() {}, playlist(payload) { this.searchResult = payload; console.log("playlist", payload); this.player.nextVideo(); }, playVideo() { this.player.loadPlaylist({ list: String, listType: String, index: Number, startSeconds: Number, }); this.player.playVideo(); }, stopVideo() { this.player.stopVideo(); }, playing() { console.log(" we are watching!!!"); }, }, computed: { player() { return this.$refs.youtube.player; }, }, }; </script>