#100DaysOfWeb in Python Transcripts
Chapter: Days 93-96: Vue.js - JavaScript user interfaces
Lecture: A nicer dropdown
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Our app is looking pretty good. We have our search box all wired up and working well. We have our top 10 button it's hyperlink
0:08
and it's working pretty well. The design down here, I wish we had posters but the database doesn't have 'em
0:13
so you know, we're going to go with what we got there and we would drop that, but that's something else.
0:17
But I think the design is pretty good at this point however there's one glaring thing. What is this?
0:23
Why is this ComboBox, this drop down box even here? Like what does it do? There's no description of what it is and if I click it
0:30
oh it looks like these might have to do with genres, okay. We want to change it also to not look like this weird drop down box
0:36
but to look like this until you click it in which it becomes a cool drop down. So we're going to do two things to make that work.
0:41
First we're going to give it some kind of text when it's brand new and you haven't seen it haven't touched it to say here's how you can find
0:50
these by genre. So let's go over and do this in our JavaScript. First thing we're going to do is we're going to put into our temp data
0:57
we're going to change this when we get the data from the service. But we're going to go over here say top movies by genre.
1:02
Okay, so this is going to be the first element of this list and then what we also need to do is come over
1:08
and somehow associate the selected genre with that. So we just come over here and say the selected genre
1:14
is this and it's also going to be helpful later when we don't have this fake data, it has that in it
1:20
to know what the value for resetting that ComboBox is we'll have no genre is also going to be that first item like so well lets go refresh it now.
1:30
Boom, why did this one get selected? Remember we have over here the v-model. The selected item is whatever the value is for selected genres.
1:40
So that's going to be the thing here and that's why if we set it to the first one it's going to be selected. This we're going to use later on
1:46
when we get the data from the service. Here we go, cleaned up a little better extra code that wasn't necessary at the bottom.
1:52
So now we've got it working in terms of functionality. You load the page, it comes like this. You got to select something, load it again.
1:59
However it looks pretty bad, right? So I'm going to do a little trick bring in a lot of code that'll make this a lot nicer but we don't have to write.
2:08
So let me just show you about this. I already included here this CSS and this job description and notice there's a link
2:17
to a bunch of cool CSS Select boxes. So this JavaScript is just the JavaScript that will take and make basically a label turn into something like
2:26
a much nicer select box. So there's not a whole lot to it we're just going to drop it in, it does its magic and it literally just styles this.
2:33
There's no more to do than that. So for the top let's put the CSS and at the bottom let's put the JavaScript.
2:40
Now if we just refresh, boom, look at that it's that cool looking? So you can go read up on how they did that with the
2:46
drop down here, but there's really not too much to it and the details are not super important. When we click on it, look, there we go.
2:52
Here's our drop down we can pick film noir or documentary, or we can refresh the page and it resets.