Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Displaying, Looping, Searching, and Filtering Data Chapter 2

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 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>