#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Movies by genre through the API
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
We are so close to done with this demo app that we're building here, our movie exploder. Remember, we can search. That works great.
0:08
We can get the top 10. That works great. We can cut this cool drop down. But when we click on this, nothing. All right, so let's go and fix that.
0:16
We need this load genre function. Now you can imagine the search one was easy to implement the top 10 was easy to implement, same here.
0:24
So what we're going to do, is we're going to need to get the genre. And we'll have to say, let's just create the URL.
0:29
It's going to be something like base URL plus something plus this genre here. Let's go see what that is.
0:35
When we want a movie by genre we say API movie genre and then what it is. So like that. That should do it. And then all we have to do is just call
0:46
tbhis.load_movies with the URL. Again, we do have, oops. I guess we're passing in. Let's just go ahead and use what's being passed in.
0:53
Now we also, we saw that it was a problem about the selected genre being a little bit messed up when you click this.
1:00
It turns out that the same thing is happening with search. So if I say test and then I click a genre or let's just
1:06
click top 10, well is that the top 10 or is it test? We need to clear that out as well. So that's super easy. this.search_text = null.
1:15
Not up there but on these two. Okay. This is looking good. I think it's ready. Let's give it a quick refresh. First to do that little fix.
1:24
Get some data. There you go. Went away. Now let's try to get just the comedy. Oh yeah. Forrest Gump. Let's try to get fantasy.
1:32
Lord of the Rings. Oh my gosh, how cool is this? So awesome. I want to do one more thing to take this up a notch.
1:38
So I want to be able to quickly interact with genres from this list as well. And we have these right here and notice I even
1:46
gave them a style that makes them look clickable. Let's do one more thing here. Here's these little badges. And we're doing an R v-for.
1:53
Let's just say that's on click we want that to be equal to load_genre. Ah is that what it is? Load genre. And we want to pass in G.
2:09
There's comedy. There's drama. I guess we probably need to do one more thing to make this all work the best possible way.
2:16
Say this dot selected genre equals genre. Like so. Now if I click on comedy you can see it showing comedy. If I click on drama, it's showing drama.
2:28
Very cool, right?