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

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:

Creating links using v-html

The next step is to link the email address so that it is clickable for users viewing the list of

people. In this instance, we need to concatenate strings by adding a mailto: before the

email address.

The first instinct is to do the following:

<a href="mailto:{{person.email}}">{{ person.email }}</a>