Now that our Vue app is hooked up to our HTML, we are ready to generate and display dynamic data. As discussed in Introduction to Vue, displaying and updating dynamic data for users is essential functionality for most front-ends.
Most values on the web can change at any moment, such as the number of likes on a post or the current set of posts to display. We call constantly-changing data values like this dynamic data. We need a place to store dynamic data values so that we can still use them in our HTML even when we don’t know what their values will be at any given moment. There are many different ways to do this in Vue.
The simplest way is the data
property on the options object. The value of data
is an object. Each key-value pair in this object corresponds to a piece of data to be displayed in the template. The key is the name of the data to use in the template and the value is the value to display when the template is rendered.
We then use mustache syntax to display this data in our HTML template.
const app = new Vue({ el: '#app', data: { language: 'Spanish', hoursStudied: 274 } });
<div id="app"> <p>You have been studying {{ language }} for {{ hoursStudied }} hours</p> </div>
Looking at this example, we see that two pieces of dynamic data were added to data
on our Vue instance: language
and hoursStudied
with values of 'Spanish'
and 274
respectively. These values are then displayed in our template using mustache syntax, displaying the text You have been studying Spanish for 274 hours
to our user. If these values are changed later on by our app, such as if the language is changed or the number of hours studied increases, our template will automatically display this new value for the user.
Instructions
We’re going to need to add dynamic data to make our app work.
In app.js, add a data
attribute to our options object with a value of an empty object, {}
.
Next, add the following data to the data
object. Each of these pieces of data corresponds to a field in our ticketing app’s form.
- A
firstName
attribute with a value of an empty string,''
- A
lastName
attribute with a value of an empty string,''
- An
email
attribute with a value of an empty string,''
- A
ticketQuantity
attribute with a value of1
- A
ticketType
attribute with a value of'general'
- A
referrals
attribute with a value of an empty array,[]
- A
specialRequests
attribute with a value of an empty string,''
- A
purchaseAgreementSigned
attribute with a value offalse
The values we are setting here are the values these pieces of dynamic data will start with (before the user interacts with and changes them. As a result, some have default starting values (such as ticketType
with 'general'
) and others start as empty strings since we can’t guess what a user may want to set them to.
Finally, let’s replace a few hard-coded values in our template with our dynamic data.
Make the following modifications to line 81 of index.html:
- Replace
First
with a mustache expression that will renderfirstName
fromdata
- Replace
Last
with a mustache expression that will renderlastName
- Replace
Quantity
with a mustache expression that will renderticketQuantity
- Replace
Type
with a mustache expression that will renderticketType
Check out the browser to the right to see your template now use the data
values to render the page. Try setting different values for firstName
, lastName
, ticketQuantity
, and ticketType
and rerunning your code to see the template update in the browser. We will make these values even more readable in the next exercise.