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

But Vue doesn't allow interpolation inside attributes. Instead, we must use the v-bind

directive on the href attribute. This turns the attribute into a JavaScript variable, so any

raw text must be written in quotes, and the concatenated with the desired variable:

<a v-bind:href="'mailto:' + person.email">{{ person.email }}</a>

Note the addition of v-bind:, the single quotes and concatenation + identifier.

Format balance

Before we move on to filtering the users, add a method to correctly format the balance,
prepending a currency symbol defined in the data object and ensuring there are two

numbers after the decimal point. We can adapt our method from Chapter 1, Getting Started

with Vue.js, to achieve this. Our Vue application should now look like this:

const app = new Vue({

el: '#app',

data: {

people: [...],

currency: '$'

},

methods: {

activeStatus(person) {

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

},

formatBalance(balance) {

return this.currency + balance.toFixed(2);

}

}

});

We can utilize this new method in our View:

<td>{{ formatBalance(person.balance) }}</td>

Format registered date

The registered date field in the data is computer friendly, which is not very human-friendly

to read. Create a new method titled formatDate that takes one parameter — similar to the

formatBalance method previously.