Displaying a list with v-for

We will now display the list of notes below the toolbar.

1. Just below the toolbar, add a new p element with the ;notes class:

      <aside class="side-bar">
        <p class="toolbar">
          <button @click="addNote"><i class="material-icons">add</i>        
          Add note</button>
        </p>
        <p class="notes">
          <!-- Note list here -->
        </p>
      </aside>

Now, we want to display a list of multiple p elements, one for each note. To achieve this, we need the v-for directive. It takes a special expression as the value, in the form of item of items, that will iterate over the items array or object and expose an item value for this part of the template. Here is an example:

<p v-for="item of items">{{ item.title }}</p>

You can also use the in keyword instead of of:

<p v-for="item in items">{{ item.title }}</p>

Imagine that we have the following array:

data () {
  return {
    items: [
      { title: 'Item 1' },
      { title: 'Item 2' },
      { title: 'Item 3' },
    ]
  }
}

The final rendered DOM will look like this:

<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>

As you can see, the element on which you put the v-for directive is repeated in the DOM.

1. Let's go back to our notebook and display the notes in the side pane. We store them in the notes data property, so we need to iterate over it:

      <p class="notes">
        <p class="note" v-for="note of notes">{{note.title}}</p>
      </p>

We should now have the notes list displayed below the button:

Add a few more notes using the button, and you should see that the list is updating automatically!