Use Vue.js Component Computed Properties
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.
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?
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.
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!
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)"