#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Top 10 movies from API
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Next, we want to make sure that we're getting the top ten when we click this button but more importantly almost is when the app loads
0:07
we want this to show the current top ten movies right away with no interaction whatsoever. So how are we going to make that happen?
0:13
It turns out, we've basically already written that. Oh, and notice, I've deleted a bunch of the fake data
0:19
so it's not the same as what we'll get from the service that way you can tell when it's working. So let's go over here
0:24
now remember we already wrote this load_movies thing and we said, well the way we search is we get the text and we set this url.
0:31
Same over here, so we're going to say it's going to be even simpler, we're going to just say this.load_movies, url is base_url plus
0:39
let's just go see what it is it is movies/top. That's it. movies/top, well we've now implemented get the top ten. How cool is that?
0:50
Isn't it a good idea to have that as a separate function? Cuz we're going to use it down here as well. So let's go ahead and see if this is working.
0:55
Refresh, we should get the top ten data right here. Boom, look at that. Turn, Inferno, Shawshank Redemption, and so on.
1:02
Now, one thing, if you notice there's like a little flicker where Shawshank and then it goes away
1:06
and the reason is up here we have the movies set already we can set that to nothing. In the beginning it probably should do that the same for that.
1:13
So in this sense, we're no longer working with the fake data at all. Let's try it again. Here we go, we got our data.
1:20
One more refresh, you can kind of see the little curly braces something I don't love about these frameworks but it is what it is.
1:25
Cool, it looks like it's working. So now, if I search for test and then I click top ten, it's going back.
1:31
One quick little caveat here is when I say drama and I click top ten. Get this to come up again I click on this, you really want that to reset.
1:41
So let's take care of that problem real quick. So we're going to say this dot selected genre is no genre and same thing there.
1:50
Actually, and we do it right away. See if I got that right. Okay, so we go down here hit top ten, goes back
1:59
don't know why Web Soren thinks there's an error cuz it looks to me like it's working. If I have this selected on family, then I say test
2:05
it goes back to unselected. Beautiful. Alright, the last thing to do is just make this work and I think our app is totally done.