So I have have a search component and the search component sends data to parent player.component. I send video id and an object with 5 search results to 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>So I have access to videoId and and the search result object. But i want my player to be able to play next video in my search results and I am not sure on how to do this.
<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("sex", 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>