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

field.includes(query.toLowerCase());

}

}

}

return visible;

}

The next error in the console is:

Cannot read property 'field' of undefined

The reason the filtering does not work is that the filterRow method is looking for

this.filter.field and this.filter.query on the component, not the parent Vue

instance where it belongs.

As a quick fix, you can use this.$parent to reference data on the parent

element—however, this is not recommended and should only be used in

extreme circumstances or to quickly pass the data through.

To pass the data through to the component we are going to use another prop - similar to

how we are passing the person into the component. Fortunately, we had grouped our
filtering data already, so we are able to pass that one object instead of individual properties

of query or field. Create a new prop on your component titled filter and ensure you

only allow an Object to be passed through:

props: {

person: Object,

filter: Object

},

We can then add the prop to the team-member component, allowing us to pass the data:

<table>

<template v-for="individual in people">

<team-member v-bind:person="individual" v-

bind:filter="filter"></team-member>

</template>

</table>