1
00:00:00,340 --> 00:00:05,130
We're nearly finished with our accordion
menu, there's just one thing left to do.

2
00:00:05,130 --> 00:00:06,890
Add up and down arrows that change,

3
00:00:06,890 --> 00:00:10,560
depending upon whether a menu
item's state is open or closed.

4
00:00:12,270 --> 00:00:15,830
Looking at our finished example again,
you'll notice that when I open a media

5
00:00:15,830 --> 00:00:21,550
item, the arrow points up, and when I
close a media item, the arrow points down.

6
00:00:21,550 --> 00:00:26,170
Also notice on the side here, each item
is color-coded, depending on its type.

7
00:00:27,250 --> 00:00:31,130
We'll use Vue class findings to
accomplish both of these things.

8
00:00:31,130 --> 00:00:32,606
First, let's tackle the arrows.

9
00:00:32,606 --> 00:00:41,410
In our style.css file, we're targeting two
pseudo elements called more and after.

10
00:00:41,410 --> 00:00:44,910
Don't worry too much about the styles,
just know that the more pseudo class

11
00:00:44,910 --> 00:00:49,500
adds the down arrow, and
the less pseudo class adds the up arrow.

12
00:00:49,500 --> 00:00:52,490
If you're used to using
plain JavaScript or JQuery,

13
00:00:52,490 --> 00:00:57,380
it may be tempting to add more
logic to the toggle details method.

14
00:00:57,380 --> 00:01:00,750
Maybe each time the list item is clicked,
not only do we hide or

15
00:01:00,750 --> 00:01:04,820
show the media details, but
we might also add or remove a class

16
00:01:04,820 --> 00:01:08,680
from the list item based on whether or
not the details are shown or hidden.

17
00:01:08,680 --> 00:01:12,990
That's one way to do it but with view
we're going to do it slightly differently.

18
00:01:12,990 --> 00:01:16,390
And while we're here I'm gonna quickly
get rid of these console log statements,

19
00:01:16,390 --> 00:01:17,630
because we don't need them any more.

20
00:01:19,350 --> 00:01:23,140
in our view template, we can use
the v-bind directive to bind classes to

21
00:01:23,140 --> 00:01:26,420
elements based on conditions
that we can specify.

22
00:01:26,420 --> 00:01:27,300
I'll show you what I mean.

23
00:01:28,490 --> 00:01:32,810
Recall that we have a property on all
of our media items called show detail.

24
00:01:32,810 --> 00:01:34,720
And that property is set to either true or

25
00:01:34,720 --> 00:01:38,170
false each time the user
clicks on the list item.

26
00:01:38,170 --> 00:01:42,260
So the state of the accordion menu,
whether or not a list item is opened or

27
00:01:42,260 --> 00:01:45,180
closed, is already being managed and
tracked for

28
00:01:45,180 --> 00:01:48,050
us, we need only to take advantage of it.

29
00:01:48,050 --> 00:01:53,727
So first, in our view template I'll add
a v-bind directive to the list item,

30
00:01:53,727 --> 00:01:55,370
followed by :class.

31
00:02:00,202 --> 00:02:05,820
Between the quotations,
I'll pass v-bind:class and object.

32
00:02:05,820 --> 00:02:13,810
And in the object I'll type
less: media.showDetail.

33
00:02:13,810 --> 00:02:17,800
Less here represents the name of
the class I wanna bind to the list item,

34
00:02:17,800 --> 00:02:20,990
if media.showDetail is true.

35
00:02:20,990 --> 00:02:24,650
So if you will look at the state
of media.showDetail, and

36
00:02:24,650 --> 00:02:27,250
if the value of showDetail
evaluates to true or

37
00:02:27,250 --> 00:02:32,060
some truthy value, then the class less
will be placed on this list item.

38
00:02:32,060 --> 00:02:34,870
So let's see this in the browser.

39
00:02:34,870 --> 00:02:39,940
I'll go ahead and close our example, and
refresh the project that we're working on.

40
00:02:39,940 --> 00:02:43,815
And then if we inspect this element,

41
00:02:43,815 --> 00:02:50,818
you can see that the less class is
added and removed as I click on it.

42
00:02:50,818 --> 00:02:55,643
We're halfway there, now we need the down
arrow to show when the menus are closed.

43
00:02:55,643 --> 00:02:59,590
Go ahead and pause the video and
see if you can work out what to do next.

44
00:03:01,280 --> 00:03:04,410
So we can add and remove the more class,

45
00:03:04,410 --> 00:03:08,070
simply by adding another
condition into this class object.

46
00:03:08,070 --> 00:03:15,436
So I can say more: Basically

47
00:03:15,436 --> 00:03:20,050
we are saying here, if media.showDetail
is false, add the more class.

48
00:03:24,028 --> 00:03:26,680
And now we have functional up and
down arrows.

49
00:03:28,090 --> 00:03:32,430
Now what about adding a colorful
border to the list item based on type?

50
00:03:32,430 --> 00:03:37,030
If we look in styles.css again, you'll see
there's a class for book and a class for

51
00:03:37,030 --> 00:03:40,180
streaming that add these border colors.

52
00:03:40,180 --> 00:03:44,300
These classes conveniently have
the same name as the type property

53
00:03:44,300 --> 00:03:46,530
on their corresponding media objects.

54
00:03:50,285 --> 00:03:54,722
We already have easy access to each item's
type through their type as a property on

55
00:03:54,722 --> 00:03:55,830
our view instance.

56
00:03:58,329 --> 00:04:01,830
We just need to use it to
set the correct class.

57
00:04:01,830 --> 00:04:06,970
You can add multiple classes to a Vue
binding by passing the binding an array.

58
00:04:06,970 --> 00:04:11,034
I'll surround our current expression
with brackets, to put them in an array.

59
00:04:14,332 --> 00:04:18,843
This will allow me to add a second
expression into this array,

60
00:04:18,843 --> 00:04:21,570
that will dynamically add a class.

61
00:04:21,570 --> 00:04:24,300
So, after the object containing
the first expression,

62
00:04:24,300 --> 00:04:27,860
I'll add a comma, then media.type.

63
00:04:27,860 --> 00:04:30,750
Here I'm accessing the type
of each piece of media, and

64
00:04:30,750 --> 00:04:33,700
setting a class equal to it's type.

65
00:04:33,700 --> 00:04:38,700
So if the media has a type of book,
it will set a class called book and so on.

66
00:04:39,700 --> 00:04:41,060
Let's take a look at this in the browser.

67
00:04:47,951 --> 00:04:50,154
You can see on these elements,

68
00:04:50,154 --> 00:04:54,070
each media item now has a class
equal to its media type.

69
00:04:56,484 --> 00:04:58,690
And we're seeing custom border colors.

70
00:04:59,960 --> 00:05:02,480
You may notice that this is
all working just fine, but

71
00:05:02,480 --> 00:05:05,650
there are a couple of things about
the solution that could potentially cause

72
00:05:05,650 --> 00:05:07,470
issues somewhere down the line.

73
00:05:07,470 --> 00:05:11,650
For example, a type that contains
two words such as streaming video

74
00:05:11,650 --> 00:05:15,470
is actually setting two classes,
streaming and video.

75
00:05:15,470 --> 00:05:19,720
And some of the classes are in all caps
because their type is in all caps,

76
00:05:19,720 --> 00:05:21,630
such as DVD.

77
00:05:21,630 --> 00:05:25,000
I'll leave it up to you to find
solutions if you want extra practice.

78
00:05:26,210 --> 00:05:31,270
Finally, we can make this just a bit
shorter with the turn area expression.

79
00:05:31,270 --> 00:05:36,199
Because I'm evaluate a single expression
here instead of conditionally adding

80
00:05:36,199 --> 00:05:39,905
two classes, this no longer
needs to be inside of an object.

81
00:05:39,905 --> 00:05:44,322
And I will say media.showDetail.

82
00:05:49,357 --> 00:05:52,233
The turn area operator is
just regular JavaScript, so

83
00:05:52,233 --> 00:05:54,380
I won't go too deep into it.

84
00:05:54,380 --> 00:05:59,870
But this is basically like saying,
is the value of media.showDetail true?

85
00:05:59,870 --> 00:06:04,360
If so set the class to less, and
if not set the class to more.

86
00:06:05,600 --> 00:06:07,280
Let's make sure this still works.

87
00:06:10,059 --> 00:06:11,890
And fantastic, it does.

88
00:06:13,170 --> 00:06:15,260
We've covered a lot so far.

89
00:06:15,260 --> 00:06:18,360
In this part of the course you've
learned the fundamentals of templating,

90
00:06:18,360 --> 00:06:22,610
data binding, list rendering, conditional
rendering, computer properties, and

91
00:06:22,610 --> 00:06:24,210
class and style bindings.

92
00:06:24,210 --> 00:06:25,870
Very well done.

93
00:06:25,870 --> 00:06:28,340
In the next and
final part of the course, we'll bring

94
00:06:28,340 --> 00:06:32,950
all this new knowledge together to create
a fun and interactive flashcard app.

95
00:06:32,950 --> 00:06:36,720
In the process of building the flashcard
app, we'll learn a few more tips and

96
00:06:36,720 --> 00:06:40,450
tricks such as how to collect and
display user input.

97
00:06:40,450 --> 00:06:43,680
And a light introduction to creating
transition effects with Vue.