Vue.js 2 Web Development Projects

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 div element with the ;notes class:

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

Now, we want to display a list of multiple div 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:

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

You can also use the in keyword ...