Optimizing your App and Using Components to Display Data Chapter 3dateRegistered() {
let registered = new Date(this.registered);
return registered.toLocaleString('en-US');
},
status() {
return output = (this.person.isActive)?
'Active' : 'Inactive';
}
},
methods: {
filterRow() {
let visible = true,
field = this.filter.field,
query = this.filter.query;
if(field) {
if(this.statusFilter) {
visible = (typeof query === 'boolean')?
(query === this.person.isActive) : true;
} else {
query = String(query),
field = this.person[field];
if(typeof field === 'number') {
query.replace(this.currency, '');
try {
visible = eval(field + query);
} catch(e) {
}
} else {
field = field.toLowerCase();
visible = field.includes(query.toLowerCase());
}
}
}
return visible;
}
}
});And the component within the View with the extra props now looks like the following.
Note that the camel-cased prop becomes snake case (hyphenated) when used as an HTML
attribute:
<template v-for="individual in people">
<team-member v-bind:person="individual" v-
bind:filter="filter" v-bind:status-
filter="isActiveFilterSelected()"></team-
member>
</template>