Use Vue.js Component Computed Properties

Greg Thoman
InstructorGreg Thoman

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 4 years ago

You can add computed properties to a component to calculate a property on the fly. The benefit of this over invoking a method is that computed properties are cached based on their dependencies.

[00:00] Here we have a list of dinosaur species along with their quantities. Let's use computed properties to aggregate their totals. For total dinosaurs, let's use the property total dinos and for total species, we'll use total species.

[00:14] Let's add these two properties to our data struct and default them to zero. After our methods block, let's add a section called computed. The properties in the computed block will override those in data.

[00:26] We'll create a new method called total dinos. In that method, let's create a variable called sum and another one for items. For each item, let's add its quantity to sum. Then let's return sum. For total species, we'll return the length of our items array.

[00:43] Let's create a way to track how many times these computed properties are being called. Let's add a span to our template with the property dinos updated and another span with species updated. We'll default those to zero in our data struct.

[00:58] In our total dinos method, let's increment this.dinos updated. In total species, we'll increment this.species updated. Now we can watch the updated properties change when those computed properties get called.

Bijoy Thomas
Bijoy Thomas
~ 4 years ago

How are the functions for the computed properties invoked? For e.g., clicking on the '+' or '-' buttons or making something extinct causes the functions to get invoked and in turn update the 'dinosUpdated' and 'speciesUpdated' data. How is this dependency set up?

James
James
~ 4 years ago

Minor note on continuity: in lesson 2, you use the method name "deleteItem" and in this lesson it's changed to "removeItem". I like to be able to take the final code from a given lesson through to the next lesson in order to build on it and learn as I go. If method names are arbitrarily changing, this is more difficult. Especially as the "Code" tab here gives us the final state of the code for the lesson rather than the starting state.

Your CSS seems to change from lesson to lesson too.

You also don't show that you have to remove the props "totalDinos" and "totalSpecies" from the data object when you add them as computed props.

Manuel Bravo
Manuel Bravo
~ 3 years ago

You also don't show that you have to remove the props "totalDinos" and "totalSpecies" from the data object when you add them as computed props.

Thanks for the tip James!

Christopher Hall
Christopher Hall
~ 3 years ago

I noticed a bug in this lesson where the "Make Extinct" button will only remove the first item in the list, not the one you clicked on.

To fix this, change your v-for statement to: v-for="(item, index) in items"

and v-on:click to: v-on:click="removeItem(index)"