#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: Displaying and selecting genres
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
We have our top ten. Let's add our genre. Now, it's going to start out looking crummy and then I'm going to change up the code just a little bit
0:07
and apply some really nice styles to that. So the next thing that we want to put down here is we want a drop-down, or a select.
0:14
So, we're going to say we want to select. Don't need to worry about the name right now or really the id. And in here we want some options.
0:21
So, there's really two things we need to track. One is, what item is selected in the drop-down and when did that happen?
0:29
The other is, what are the options that are available? And here, let's work on options first, option singular. So what we're going to do is
0:35
we're going to bind a set of options in here. So, we'll say v-for g in genres, like so. We're going to define all the genres and show them.
0:47
And then we want to set the value, say v.bind value equal to just the text. We could show different text
0:57
like maybe the index or, of there or something. But we're going to just leave it like this. There's also a shortcut here that we can use.
1:04
If we want to say v.bind you can or you just say : and it will bind. Now this isn't great, we don't have the genres yet.
1:11
Lets go over here and say we're going to have genres are going to be a list of sci-fi, drama, comedy. Here we go. Let's go run this.
1:21
Check that out, got our little drop down already working remember that came from our view model not from our HTML, right, we just pulled those all out.
1:31
So that's pretty cool, it's a good start. We would like something a little bit better. We would like to know what one is selected
1:39
and when is it selected. So we can come over and have some more data for that we'll come over here and say selected genre equals nothing
1:46
at the beginning. Here you can say the model the data you want to keep in sync with this select box, is this. So let's go look at that real quick.
1:54
Looks like I broke something here. Oh woops, I put an equal, put a colon in there. Alright, try again.
2:00
So here, we go like this and we go view our element here we can go to the console, come back to those messages later
2:07
and if we say app.selected_genre, there it is it's drama, okay we'll select something else like comedy, it's comedy, how cool is that?
2:16
So, this part, being in sync, works great. This, not so much. Let's do something very similar to sort of fake out our web service then we'll get to
2:26
using the real web service. So now we have an all genres, its going to return an array let's stick that into our fake data as well.
2:35
Equal to that, make sure we're online, okay, great. So we're going to use this list instead of these couple we typed in and in the end
2:43
we're going to get that from the web service. But for now we'll just fake it. We refresh, nothing selected but look it's wider.
2:51
That might mean there's something in there. Hah, there is, there's all of our data. Of course, fake data, stick with me here
2:57
but we can now go and select crime we can select something else but, its looking really good isn't it? We're almost there actually
3:04
our app is surprisingly close to done.