#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?


Talk Python's Mastodon Michael Kennedy's Mastodon