We can use the values in the data
object with the mustache templating syntax to display information in our HTML. Doing this requires named data to be stored in the data
object, but some data can be calculated based on information already stored and doesn’t require it’s own key-value pair in the data
object.
For example, if I know a month, April for example, I can calculate the season, spring, in response. Trying to store these values separately on data
would require us to constantly update one whenever the other changes, potentially allowing the values to get out of sync from each other if we’re not careful. Vue allows us to store data that can be calculated using values from the data
object at a separate property called computed
.
Instead of storing computed data as key-value pairs in our data
object, we store key-value pairs in a separate computed
object. Each key in the computed
object is the name of the property and the value is a function that can be used to generate a value rather than a specific value.
const app = new Vue({ el: '#app', data: { hoursStudied: 274 }, computed: { languageLevel: function() { if (this.hoursStudied < 100) { return 'Beginner'; } else if (this.hoursStudied < 1000) { return 'Intermediate'; } else { return 'Expert'; } } } });
<div id="app"> <p>You have studied for {{ hoursStudied }} hours. You have {{ languageLevel }}-level mastery.</p> </div>
In this example, we need to know how many hours the user has studied in order to determine their language mastery. The number of hours is known, so we store it in data
. However, we need to use hoursStudied
in order to compute languageLevel
, so languageLevel
must be stored in computed
.
The Vue app determines the value of languageLevel
using the provided function. In this case, hoursStudied
is 274
, so languageLevel
will be 'Intermediate'
. The template will display You have studied for 274 hours. You have Intermediate-level mastery.
. If numberOfHours
were to change, languageLevel
would automatically be recomputed as well.
In order to reference a value from data
in this function, we treat that value as an instance property using this.
followed by the name of the data — in our example, this.hoursStudied
.
Finally, in order to display computed
values in our template, we use mustaches surrounding the name of the computed property just as we did for data
.
Instructions
Now we’re going to add some computed values.
In app.js, add a computed
property to the Vue app’s options object. Set the value of this property to an empty object, {}
.
Now let’s add some computed properties.
1 — Add a computed property called fullName
with a value of the following function:
function() { if (this.firstName && this.lastName) { return this.firstName + ' ' + this.lastName; } else { return this.firstName || this.lastName; } }
This will combine firstName
and lastName
if they are both set.
2 — Add another computed property called ticketDescription
with a value of the following function:
function() { let readableTicketType = 'General Admission'; if (this.ticketType === 'vip') { readableTicketType = 'VIP'; } let ticketPluralization = 'tickets'; if (this.ticketQuantity === 1) { ticketPluralization = 'ticket'; } return this.ticketQuantity + ' ' + readableTicketType + ' ' + ticketPluralization; }
This will turn ticketType
and ticketQuantity
into a string we can actually display to our users.
Finally, let’s use these computed properties in our template.
Make the following modifications to line 81 of index.html:
- Replace
{{ firstName }} {{ lastName }}
with a mustache expression that will displayfullName
- Replace
{{ ticketQuantity }} {{ ticketType }} tickets
with a mustache expression that will displayticketDescription
Now check out the rendered template in the browser to the right — it should be much more readable! In app.js, try changing the values of firstName
, lastName
, ticketQuantity
, and ticketType
on data
and rerunning your code to see the values of fullName
and readableTicketType
automatically get updated.