Optimizing your App and Using Components to Display Data Chapter 3
Making the filters a component
We now need to make the filtering section its own component. This isn't strictly necessary
in this scenario, but it's good practice and gives us more challenges.
The problem we face in making the filtering a component is a challenge of transferring filter
data between the filtering component and the team-member component. Vue addresses
this with custom events. These let you pass (or "emit") data to the parent or other
components from the child component.
We are going to create a filtering component which, on filtering change, passes the data
back to the parent Vue instance. This data is already passed through to the team-member
component to filter.
Creating the component
As with the team-member component, declare a new Vue.component() in your
JavaScript, referencing a template ID of #filtering-template. Create a new
template block in your view and give it the same ID. Replace the filtering form in the view
with a
template script block.
Your view should look like the following:
<div id="app">
<filtering></filtering>
<table>
<template v-for="individual in people">
<team-member v-bind:person="individual" v-
bind:filter="filter" v-
bind:statusfilter="isActiveFilterSelected()"> </team-
member>
</template>
</table>
</div>
<script type="text/x-template" id="filtering-
template">
<form>
<label for="fiterField">
Field:
<select v-on:change="changeFilter($event)"
id="filterField">
<option value="">Disable filters</option>