Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Vue.js Basics!
You have completed Vue.js Basics!
Preview
Use the event object in Vue to filter a list of items by type.
NOTE: For the application to work correctly in Firefox, you must pass in the event object to the method in your Vue instance.
//In Vue instance
filterList = function(event) {...}
//In Vue template
<select v-on:change="filterList">
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Our next step is to build a select menu
that we can use to filter our media
0:00
list by type.
0:04
In other words, if the user chooses book,
they'll only see books.
0:05
If they choose DVD,
they'll only see DVDs and so on.
0:09
If we were fairly certain that we'd
never have more than three unique
0:13
items in this menu, then we could just
hardcode an option for each type.
0:16
In our Vue template
inside the select menu,
0:21
we could create an option for book,
an option for DVD, and so on.
0:25
But we wanna make sure
to do it dynamically, so
0:31
that any type of media we add to the list
tomorrow or five years from now,
0:34
will populate in the select menu.
0:38
So for example, if our library wanted to
add a bunch of media with a type of ebook,
0:41
an option to filter by ebook would
automatically appear in the select menu.
0:46
Remember that in our data,
0:51
each object contains a type property
that tells us what type of media it is.
0:53
Book, DVD, streaming video, etc.
1:00
So we need to accomplish
this task in two parts.
1:08
First, we'll need to write some code
that goes through each media object,
1:11
gets the type, and
puts it into the select menu.
1:15
Then we'll need to watch this menu for
changes.
1:18
And each time a new menu item is selected,
1:21
we'll need to show items of that type and
hide items that are not of that type.
1:24
So let's do it.
1:30
First, in our Vue template,
we'll use the v-for directive to loop
1:31
through the media list and
create a menu option for each media type.
1:35
So I can say v-for,
1:42
item in mediaList.
1:46
And in curly braces,
1:50
we can type item.type to display
just the object's type property.
1:51
So we're looping through each
item in our media list and
1:59
accessing the type property, and
displaying that type in the menu.
2:02
So let's check this out in the browser.
2:08
I'm gonna shut the example.
2:15
Make sure to refresh, and okay, almost.
2:17
We obviously have some
undesirable duplicates, but
2:20
the good news is that we've managed
to dynamically populate the menu.
2:23
So if I were to change the type of
media to vinyl on one of my objects,
2:27
for example, Now vinyl will
automatically show up in the list.
2:32
We'll get rid of all these
duplicates in the next video.
2:41
For now let's move on to part two of the
tasks, filtering this media list by type.
2:44
Again, we wanna look at what's
been chosen from the menu and
2:50
show items with a type that matches,
and hide items that don't match.
2:53
So we can break that down
into two even smaller tasks.
2:57
First, we need a way to capture which
menu option has been chosen and
3:02
pass that information to Vue.
3:05
Then we'll need to compare the selected
menu option with the object's type.
3:07
I'll go ahead and
change this back to book.
3:16
In our Vue template, we can listen for
3:20
a change event on the select menu
by using the v-on directive.
3:23
And when the menu changes,
we'll run a method called filter list.
3:28
So on our select menu we can say
3:33
v-on:change="filterList".
3:37
Now let's go to app.js and
write the filter list method now.
3:42
I'll go to my Vue instance, and
3:49
under toggle details I'll create
new method called filterList.
3:51
We can find out which menu option has
been select by using the event object.
3:59
You may know from event handling in
plain JavaScript or jQuery that whenever
4:04
an event occurs, like this menu changing,
you can gain access to an event object.
4:09
And that event object contains useful
information about the event that just
4:14
occurred.
4:18
See the teacher's notes for more on
the event object if you're unfamiliar.
4:19
So if I console.log(event)
inside of this event handler,
4:23
and then open up Chrome dev tools,
4:31
You'll see that every time I choose a new
menu item I get a bunch of information.
4:44
I can drill down into this object,
which is the event object,
4:50
to get back which type was
chosen from the select menu.
4:55
For example, now inside my method,
I'll console.log
4:59
event.target.value, Refresh,
5:04
and now whenever I choose something from
the menu, it's printed out down here.
5:09
Great, now we have access to the type
that was selected from the menu.
5:18
Now we just need a way to keep track
of it to pass that information to Vue.
5:23
To do that, I am going to go
back to our Vue instance and
5:28
add a property to our
data object called type.
5:32
And initially I'm going to set
the value to be just an empty string.
5:40
Because any property on the data
object must have some initial value.
5:43
In other words, I wouldn't be able to
just leave it unassigned like this or
5:48
Vue will yell at me.
5:51
Now inside of my method,
5:54
I can set type to whatever has
been chosen from the select menu.
5:56
So I'll say this.type, which refers
to this property on the data object.
6:02
And I can set that equal
to event.target.value.
6:10
What's happening here is I'm saying,
hey Vue, get which menu option was chosen,
6:14
book, DVD, or streaming video, and
set the type property to that option.
6:19
So if I choose book from the menu,
it's going to change type to book.
6:27
If I choose DVD, it's going to
change this type to DVD and so on.
6:31
Basically, we're making this type
property match whatever has been chosen
6:36
from the menu.
6:40
Quick note here,
in plain JavaScript or jQuery,
6:41
I'd have to pass the event object in here
in order to use it inside of this method.
6:44
But Vue automatically provides
us with the event object so
6:50
we don't need to pass it in.
6:54
So we've done a lot,
let's review what we've done so far.
6:56
In our Vue template, we're using
a v-for directive to loop through
7:01
every media object in our media array.
7:06
And we're populating the select menu with
an option for each type in the list.
7:09
Every time a new option is chosen, we're
firing a function called filter list.
7:15
Inside of filter list, we're getting
the menu option that was chosen
7:21
and setting the type property
up here to that value.
7:29
Let me console log
this.type to demonstrate.
7:33
Each time I select a new menu option, the
type property is being set to that option.
7:50
The result is that we always known and
7:57
have easy access to which type
has been chosen from the list.
7:59
So take a moment to see if you can work
out how we can use a directive in our
8:03
Vue template, with this continually
updating type property to show or
8:07
hide the media items based on their type.
8:12
If you have absolutely no idea,
don't panic.
8:16
This stuff often needs time to sink in.
8:19
But if you want, pause the video and
take a moment to think on it.
8:22
On the list item element,
I'm going to add a v-show directive.
8:26
Inside I'll say type === media.type.
8:35
Let me do a little bit of reformatting
here, just so we can see all the code.
8:41
So remember, we're looping through and
8:46
working with each media
object in the array.
8:49
So for each item, v-show is going
to look at the type property of
8:55
each media object and
compare it to this type property.
8:59
If they match, this expression will
return true and the list item will show.
9:06
And if it doesn't match the expression
will return false and it won't show.
9:14
So let's take a look at
this in the browser.
9:18
So if we choose book, great, only the
items with the type matching book show.
9:23
Same with DVD and streaming video.
9:31
You may notice that now we'll need
a way to initially display all of
9:35
the menu items.
9:39
We'll fix that in the next video.
9:40
Our accordion menu is looking great, but
we still have a couple more things to do.
9:42
First, let's get rid of the duplicates
in our select menu with the Vue feature
9:47
called Computed Properties.
9:51
Then we'll finish up by learning how to
conditionally bind CSS classes to certain
9:53
elements based on certain conditions.
9:57
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up