Data & Lists

Extending createApp()

With our app now mounted we need some data to display. To do this, we add an options object to createApp():

// script.js
Vue.createApp({}).mount("header");

And it is inside of this object where we will be woking from now on.

The data property

The first option is the data property. This as it sounds is used to hold our applications data, sometimes referred to as state.

This is a function, which returns an object like this:

Vue.createApp({
  data() {
    return {

    }
  }
}).mount("header");

If you have used Vue 2 in the past, data could be either a function like this, or an object. With Vue 3 it must now always be declared as a function.

Instide we declare our data properties, you can think of these as a place to store the information our app needs, just like variables.

Using data properties inside our HTML

In our index.html, remember Vue is mounted to both the header element, and the #blog element.

Meaning inside of any of these sections, we can use our data properties. Let’s begin with the portfolio name:

<!-- index.html -->
<header>
  <h1>My Portfolio</h1>

Instead of having our name as hard-coded HTML, we can remove this, and have Vue.js set it for us. Inside of data(), set a property called name:

// script.js
Vue.createApp({
  data() {
    return {
      name: "Homer Simpson",
    };
  },
}).mount("header");

And we can use this name property in our HTML to display the value:

<!-- index.html -->
<h1>{{name}}'s Portfolio</h1>

Since we have created this Vue instance and mounted to the header section, this name property can not be used outside of the header section.

Data properties have the benefit of being reactive. Meaning when one of these values change, Vue will update any parts of our app which use the data.

Using arrays

This is a pretty simple example using a string of text, but what if we had multiple items in an array? The index.html has three links:

<!-- index.html -->
<li>home</li>
<li>portfolio</li>
<li>contact me</li>

These can be moved into an array:

// script.js
return {
  name: "Homer Simpson",
  links: ["home", "portfolio", "contact me"],
};

Directly outputting the links array is possible:

<!-- index.html -->
<ul>
  {{links}}
  <li>home</li>
  <li>portfolio</li>
  <li>contact me</li>
</ul>

This is probably not what we want. This will display the array in the browser like this:

[ "HOME", "PORTFOLIO", "CONTACT ME" ]

As this is an array, we could also display values individually by the index number:

<ul>
  <li>{{links[0]}}</li>
  <li>{{links[1]}}</li>
  <li>{{links[2]}}</li>
</ul>

And this works fine, but this is a long way of doing things if we have lots of array items.

Looping with the v-for directive

A more efficient way of dealing with a list of items is to use a for loop:

<ul v-for="link in links">
  <li>home</li>
  <li>portfolio</li>
  <li>contact me</li>
</ul>

The links value is the data property containing three array values, meaning the loop will repeat three times

And link is the single value of the array on each loop. The first time it loops link will be “home”, the second loop it will be “portfolio”, and so on.

This v-for is a Vue directive which is a special attribute we add to HTML elements. They begin with the v- prefix, and this particular one allows Vue to loop through a data property. We will also look at more directives during the course.

Since we have three links, the contents will be repeated three times:

To only see the list once, we can move the v-for directive onto a li element and repeat the list item:

<ul>
  <li v-for="link in links">{{link}}</li>
</ul>

Data properties can also store other data types too such as booleans and numbers, and also objects which we will discover next.