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
In this video, we'll add flair and detail to the accordion menu by using v-bind to conditionally add or remove CSS classes from our Vue template.
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
We're nearly finished with our accordion
menu, there's just one thing left to do.
0:00
Add up and down arrows that change,
0:05
depending upon whether a menu
item's state is open or closed.
0:06
Looking at our finished example again,
you'll notice that when I open a media
0:12
item, the arrow points up, and when I
close a media item, the arrow points down.
0:15
Also notice on the side here, each item
is color-coded, depending on its type.
0:21
We'll use Vue class findings to
accomplish both of these things.
0:27
First, let's tackle the arrows.
0:31
In our style.css file, we're targeting two
pseudo elements called more and after.
0:32
Don't worry too much about the styles,
just know that the more pseudo class
0:41
adds the down arrow, and
the less pseudo class adds the up arrow.
0:44
If you're used to using
plain JavaScript or JQuery,
0:49
it may be tempting to add more
logic to the toggle details method.
0:52
Maybe each time the list item is clicked,
not only do we hide or
0:57
show the media details, but
we might also add or remove a class
1:00
from the list item based on whether or
not the details are shown or hidden.
1:04
That's one way to do it but with view
we're going to do it slightly differently.
1:08
And while we're here I'm gonna quickly
get rid of these console log statements,
1:12
because we don't need them any more.
1:16
in our view template, we can use
the v-bind directive to bind classes to
1:19
elements based on conditions
that we can specify.
1:23
I'll show you what I mean.
1:26
Recall that we have a property on all
of our media items called show detail.
1:28
And that property is set to either true or
1:32
false each time the user
clicks on the list item.
1:34
So the state of the accordion menu,
whether or not a list item is opened or
1:38
closed, is already being managed and
tracked for
1:42
us, we need only to take advantage of it.
1:45
So first, in our view template I'll add
a v-bind directive to the list item,
1:48
followed by :class.
1:53
Between the quotations,
I'll pass v-bind:class and object.
2:00
And in the object I'll type
less: media.showDetail.
2:05
Less here represents the name of
the class I wanna bind to the list item,
2:13
if media.showDetail is true.
2:17
So if you will look at the state
of media.showDetail, and
2:20
if the value of showDetail
evaluates to true or
2:24
some truthy value, then the class less
will be placed on this list item.
2:27
So let's see this in the browser.
2:32
I'll go ahead and close our example, and
refresh the project that we're working on.
2:34
And then if we inspect this element,
2:39
you can see that the less class is
added and removed as I click on it.
2:43
We're halfway there, now we need the down
arrow to show when the menus are closed.
2:50
Go ahead and pause the video and
see if you can work out what to do next.
2:55
So we can add and remove the more class,
3:01
simply by adding another
condition into this class object.
3:04
So I can say more: Basically
3:08
we are saying here, if media.showDetail
is false, add the more class.
3:15
And now we have functional up and
down arrows.
3:24
Now what about adding a colorful
border to the list item based on type?
3:28
If we look in styles.css again, you'll see
there's a class for book and a class for
3:32
streaming that add these border colors.
3:37
These classes conveniently have
the same name as the type property
3:40
on their corresponding media objects.
3:44
We already have easy access to each item's
type through their type as a property on
3:50
our view instance.
3:54
We just need to use it to
set the correct class.
3:58
You can add multiple classes to a Vue
binding by passing the binding an array.
4:01
I'll surround our current expression
with brackets, to put them in an array.
4:06
This will allow me to add a second
expression into this array,
4:14
that will dynamically add a class.
4:18
So, after the object containing
the first expression,
4:21
I'll add a comma, then media.type.
4:24
Here I'm accessing the type
of each piece of media, and
4:27
setting a class equal to it's type.
4:30
So if the media has a type of book,
it will set a class called book and so on.
4:33
Let's take a look at this in the browser.
4:39
You can see on these elements,
4:47
each media item now has a class
equal to its media type.
4:50
And we're seeing custom border colors.
4:56
You may notice that this is
all working just fine, but
4:59
there are a couple of things about
the solution that could potentially cause
5:02
issues somewhere down the line.
5:05
For example, a type that contains
two words such as streaming video
5:07
is actually setting two classes,
streaming and video.
5:11
And some of the classes are in all caps
because their type is in all caps,
5:15
such as DVD.
5:19
I'll leave it up to you to find
solutions if you want extra practice.
5:21
Finally, we can make this just a bit
shorter with the turn area expression.
5:26
Because I'm evaluate a single expression
here instead of conditionally adding
5:31
two classes, this no longer
needs to be inside of an object.
5:36
And I will say media.showDetail.
5:39
The turn area operator is
just regular JavaScript, so
5:49
I won't go too deep into it.
5:52
But this is basically like saying,
is the value of media.showDetail true?
5:54
If so set the class to less, and
if not set the class to more.
5:59
Let's make sure this still works.
6:05
And fantastic, it does.
6:10
We've covered a lot so far.
6:13
In this part of the course you've
learned the fundamentals of templating,
6:15
data binding, list rendering, conditional
rendering, computer properties, and
6:18
class and style bindings.
6:22
Very well done.
6:24
In the next and
final part of the course, we'll bring
6:25
all this new knowledge together to create
a fun and interactive flashcard app.
6:28
In the process of building the flashcard
app, we'll learn a few more tips and
6:32
tricks such as how to collect and
display user input.
6:36
And a light introduction to creating
transition effects with Vue.
6:40
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