Showing A List of Movies

To populate the list component with a list of movies from App, the parent component, send a request to your server for the data.

Fetch the Movies

To obtain a list of the movies:

1. Import axios, a library for making Ajax requests:

   import axios from 'axios';

2. Add the Ajax logic to the created lifecycle method of the App component:

   axios.get(this.url)
   .then(res => {
   this.movies = res.data;
   })

   The logic sends a get request with axios to a URL stored in this.url. When a payload returns, it sets this.movies to the value of the payload.

3. Define movies and url in the model:

   data() {
   return {
   movie: {},
   movies: [],
   url: '<YOUR WEBTASK URL>/movies'
   };
    },

Render VideoList

Now import the VideoList component and render its element.

1. Import VideoList:

   import VideoList from './components/VideoList.vue';

2. Specify the child in the component:

   components: {
   VideoPlayer,
   VideoList
   }

3. Render to the DOM immediately below the VideoPlayer component:

   <div class="container">
    <h2 class="is-size-3">Movies</h2>
    <VideoList movie="updatePlayer" :movies="movies"></VideoList>
   </div>

Handle the Selected Videos

Afterwards, the choose-movie event calls the updatePlayer method if the event is triggered. Therefore, add updatePlayer to the methods object:

  methods: {
  updatePlayer(movie) {
  this.movie = movie;
  },
  }

updatePlayer sets the value of movie, which triggers the watch in VideoPlayer, causing a change in the trailer that is playing.

So far, so good:

You can also select a movie to see its trailer: