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
Computed properties are a feature of Vue that help us perform more complex calculations or operations that affect the way our data is displayed.
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'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
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