v-for and displaying our data

The next HTML declaration means we can start displaying our data and putting some of these attributes into practice. As our data is an array, we will need to loop through it to display each element. To do this, we will use the v-for directive. 

Generate your JSON and assign it to a variable called people. During these examples, the generated JSON loop will be displayed in the code blocks as [...]. Your Vue app should look like the following:

      const app = new Vue({
        el: '#app',

        data: {
          people: [...]
        }
      });

We now need to start displaying each person's name in our View as a bulleted list. This is where the v-for directive comes in:

      <p id="app">
        <ul>
          <li v-for="person in people">
            {{ person }}
          </li>
        </ul>
      </p>

The v-for loops through the JSON list and for every entry temporarily assigns it the person variable. We can then output the value or attributes of the variable.

The v-for loop needs to be applied to the HTML element you want to be repeated, in this case, <li>. If you don't have a wrapping element or don't wish to use the HTML you can use the Vue <template> elements. These get removed at runtime while still creating a container for you to output the data with:

      <p id="app">
        <ul>
          <template v-for="person in people">
            <li>
              {{ person }}
            </li>
          </template>
        </ul>
      </p>

The template tag also hides the contents until the app has initialized, which may be handy if your network is slow or your JavaScript takes a while to fire.

Just leaving our view to output {{ person }} will create a long string of information, without any use to us. Update the output to target the name property of the person object:

      <li v-for="person in people">
        {{ person.name }}
      </li>

Viewing the result in the browser should reveal a list of the user's names. Update the HTML to list the users in a table showing their names, email addresses, and balance. Apply the v-for to the <tr> element:

      <table>
        <tr v-for="person in people">
          <td>{{ person.name }}</td>
          <td>{{ person.email }}</td>
          <td>{{ person.balance }}</td>
          <td>{{ person.registered }}</td>
        </tr>
      </table>

Add an extra cell to your table. This is going to display Active if they are active and Inactive if not, using the isActive property on the person object. This can be achieved in two ways – using the v-if directive or alternatively using a ternary if. Ternary ifs are in-line if statements that can be placed within the curly brackets of your View. We would use the v-if if we wanted to use HTML elements to apply some styling.

If we were using a ternary 'if', the cell would look like the following:

      <td>{{ (person.isActive) ? 'Active' : 'Inactive' }}</td>

And if we opted for the v-if option with v-else, allowing us to use the HTML we wish, it would look like this:

      <td>
        <span class="positive" v-if="person.isActive">Active</span>
        <span class="negative" v-else>Inactive</span>
      </td>

This active element is a perfect example of where a Vue Component would be ideal – we'll cover that in Chapter 3, Optimizing our App and Using Components to Display Data. As an alternative that is more in keeping with our MVVM methodology, we could create a method, which returns the status text. This would tidy up our view and moves the logic to our app:

      <td>{{ activeStatus(person) }}</td>

Our method would then carry out the same logic as our view was:

activeStatus(person) {
  return (person.isActive) ? 'Active' : 'Inactive';
}

Our table will now look like the following: