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

Optimizing your App and Using Components to Display Data Chapter 3

break;

case 'registered':

break;

}

return output;

}

We now just need to copy the code from our original formatting functions into the

individual cases:

format(person, key) {

let field = person[key],

output = field.toString().trim();

switch(key) {

case 'balance':

output = this.currency + field.toFixed(2);

break;

case 'registered':

let registered = new Date(field);

output = registered.toLocaleString('en-US');

break;

}

return output;

}

This format function is now a lot more flexible. We can add more switch cases should we

need to cater for more fields (process the name field, for example) or we can add new cases

to existing code. An example of this would be if our data contained a field that detailed the

date on which the user deactivated their account, we could easily display it in the same

format as registered:

case 'registered':

case 'deactivated':

let registered = new Date(field);

output = registered.toLocaleString('en-US');

break;