Use Vue.js Component Computed Properties

Greg Thoman
InstructorGreg Thoman

Share this video with your friends

Send Tweet

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.

Bijoy Thomas
Bijoy Thomas
~ 3 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
~ 3 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
~ 2 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
~ a year 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)"