Skip to Content
Codecademy Logo
Learn Vue.js
Learn
Vue Data
Data

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

1.

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, {}.

2.

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 of 1
  • 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 of false

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.

3.

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 render firstName from data
  • Replace Last with a mustache expression that will render lastName
  • Replace Quantity with a mustache expression that will render ticketQuantity
  • Replace Type with a mustache expression that will render ticketType

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.

Folder Icon

Sign up to start coding

Already have an account?