Optimizing your App and Using Components to Display Data Chapter 3Resolving JavaScript errors
As with the team-member component, you are going to experience some errors in your
JavaScript console. These can be resolved by copying the filter data object and both the
changeFilter and isActiveFilterSelected methods from the parent instance. We'll
leave them in both the component and parent instance for now, but we'll remove the
duplication later:
Vue.component('filtering', {
template: '#filtering-template',
data() {
return {
filter: {
field: '',
query: ''
}
}
},
methods: {
isActiveFilterSelected() {
return (this.filter.field === 'isActive');
},
changeFilter(event) {
this.filter.query = '';
this.filter.field = event.target.value;
}
}
});Running the app will show both the filters and person listing, but the filters won't update
the people list as they are not communicating yet.
Using custom events to change the filter field
With custom events, you can pass data back up to the parent instances using the $on and
$emit functions. For this app, we are going to store the filtering data on the parent Vue
instance and update it from the component. The team-member component can then read
the data from the Vue instance and filter accordingly.