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.
[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.
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)"
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?