Preview
Video Player
00:00
00:00
Computed Properties
8:51Computed properties are a feature of Vue that help us perform more complex calculations or operations that affect the way our data is displayed.
We've learned how we can evaluate simple
JavaScript expressions in our view
0:00
templates, such as the expression we used
in the v-show directive in the last video.
0:04
Many times, however, we want to keep our
templates as clean and easy to maintain as
0:13
possible by keeping complicated
logic within the view instance.
0:18
A feature of view that helps us out
here is called computed properties.
0:21
Computed properties are a feature of
view that help us perform more complex
0:27
calculations or operations that
affect the way our data is displayed.
0:31
We can use a computed
property in our project
0:36
to get rid of the duplicates in this list.
0:39
So let's do that.
0:42
Right now I'm looping through the media
list, getting all of the media types and
0:44
setting the types as
options in the select menu.
0:48
The problem of course is that many of
these media items are the same type.
0:52
So we have a lot of
repetition in the list.
0:56
To solve this, we'll write a computed
property that looks at our media list,
0:59
eliminates the duplicates,
and returns a new list.
1:03
We'll add another option to our
view instance called computed.
1:07
So down here, under methods,
I'll make a new object called computed.
1:13
And inside the computed object,
I'll create a property called
1:23
uniqueItemsList, Which will be a function.
1:28
Inside this method, we're going to
write some totally normal JavaScript
1:35
that will return a new list that
doesn't contain any duplicates.
1:39
Now there are a lot of ways that
we could check for duplicates.
1:43
We could use the regular for loop.
1:46
We could use a couple
of fancy array methods.
1:47
If you have ideas, I would encourage
you to pause the video and
1:50
see if you can work it out for yourself.
1:53
But here's the way I'm going to do it.
1:55
First, I'll create a new empty array.
1:58
Then I'm going to grab our media items.
2:06
Remember, I can do that by
referring to this.mediaList,
2:08
which refers to our media
array full of media objects.
2:14
Then I'm going to say for
each individual item in the list,
2:20
if the item's type isn't already
in my new array, push it in there.
2:23
So we'll look at each individual item.
2:30
So let me try to quickly
explain this logic.
3:08
For example, let's say it looks at
the first item in the media list,
3:11
which is the book, Hop on Pop.
3:14
Which has a type of book,
it will look in the types array.
3:16
And it won't find the type, book,
because the array is empty.
3:20
So it will push that type,
book, into the array.
3:24
However when we get to the next book,
Sirens of Titan, it will look in
3:28
the array, find the type, book, and
it won't push that type in again.
3:32
The result is an array
of unique media types.
3:37
So after we're done looking
at all the types and
3:40
pushing unique types into the array,
we'll return that array.
3:43
Let's quickly open up the console and
look at view dev tools.
3:47
Oops, we need to make sure this
says computed and not computer.
4:03
If you're like me,
that's a typo that you'll make constantly.
4:08
So, watch out for that.
4:11
So we now have a property we
can examine called computed.
4:15
And inside is an array of
items called uniqueItemsList.
4:19
If you're still confused about this logic,
don't worry too much about it.
4:24
The important part is to understand that
uniqueItemsList returns a list of unique
4:28
media types.
4:33
And we can now refer to this computed
property in our template where we need it.
4:33
So, let's do that.
4:38
Go back to index.html,
and here on line 17,
4:41
where we're looping through mediaList for
item types,
4:45
we're going to delete mediaList and
replace it with uniqueItemsList.
4:50
And now we're looping through an array,
rather than an array of objects, so
4:56
we no longer need dot notation here.
5:00
We can just say we want to display
whatever alias we're using here,
5:04
which is item.
5:08
So, let's save and take a look at this.
5:12
And fantastic.
5:16
Now if we add a new item to
the list with a brand new type,
5:18
So I will copy and paste this twice.
5:25
And we will change this type to e-book,
5:36
and this type to e-book.
5:40
And I'll just call this Title 1 for
now, and this will be Title 2.
5:47
Now if we save and refresh, we can see
that e-book appears in the menu, and
5:57
it only appears once.
6:02
Fantastic.
6:04
A key difference between
computed properties and
6:06
regular view methods is
that computed properties
6:08
update automatically when
the data it relies upon changes.
6:11
Whereas methods only run when
they are explicitly called.
6:15
A benefit of computed properties is that
they only update when the data changes.
6:19
So theoretically,
6:24
I could move the uniqueItemsList
property into my methods object.
6:25
Then I could go to index.html and
6:30
explicitly call the method
in my v-for directive.
6:35
So I have to explicitly call it here,
6:45
otherwise you'll see it
will not update the list.
6:48
So I have to use parentheses
here to explicitly call it.
6:54
And that would work the same way.
7:00
However, the difference is that as
a method, uniqueItemsList is going to run
7:02
every single time I choose a new
type from the select menu.
7:06
Computed properties, on the other hand,
are cached, meaning view will just
7:10
keep using the same data until it detects
that the underlying data has changed.
7:15
This can help our
applications perform better.
7:20
So, I'll undo and
put everything back to the way we had it.
7:23
And this is looking great.
7:37
Before we move on,
let's quickly fix the other issue here.
7:40
You may have noticed that once we've
chosen an option, there's no way to get
7:44
back to the full list,
unless you completely reload the page.
7:47
And also when the page has reloaded,
you can't see anything.
7:51
To fix this, I'll add a blank value to
the first option in our select menu.
7:55
And this is just regular HTML.
8:03
And then in this v-show directive,
8:07
I will add to this expression, so
8:11
that it says if type
equals a blink string,
8:15
Or if type equals media type.
8:22
So this is saying if the type
property is equal to an empty string,
8:25
which it is initially, because that's
how we've said it, then show the item.
8:29
So, the result is that all
the items in the list will show.
8:35
This is basically another way of
saying show all the items in the list
8:39
if the type property is
equal to an empty string.
8:43
Let's make sure this works, and great.
8:47