Getting started with Vue.js - part five

In the fifth part of the course, we will cover what computed properties are and how to use them in your projects.

Computed properties

Vue has something called computed properties. Those are used to do computations on variables from the data object.

What we are going to do in this part of the course is to show the number of interest the card has, because who wants to count manually?
We'll start by added an extra expression to the html. Note that it looks just like an expression from the data object, but this expression returns the value of a computed property.

Vue Hero - Introduction - Computed properties

We also need to add a new array to our Vue instance. This array is called "computed" and will contain all of our computed properties. Inside the computed array we'll have a list of functions.

Vue Hero - Introduction - Computed properties two

If you open index.html in your browser now you should see something like this:

Vue Hero - Introduction - Computed properties preview


Properties that are computed are cached. Meaning that if you loop through a list and do something with it and show the property in your template more than once it will only do the computation once. Only when the data object is changed the computed property will change. This is called reactivity which we will come back to later in the course.

Mini challenge

The mini challenge of this part is to make another computed property. This time I want you to make a computed property that reverses the name variable and prints it right underneath the original name. This will not be a part of the course so when you're finished you can just remove it.


Buy me a coffee

I'm working hard to create quality courses and lessons. Please consider buying me a coffee or three to support my work.