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

this.filedField = '';

this.$emit('change-filter-field',

event.target.value);

},

},

watch: {

'filter.query': function() {

this.$emit('change-filter-query', this.filter.query)

}

}

});

const app = new Vue({

el: '#app',

data: {

people: [...],

filter: {

field: '',

query: ''

}

},

methods: {

changeFilter(field) {

this.filter.query = '';

this.filter.field = field;

},

changeQuery(query) {

this.filter.query = query;

}

}

});

And the view is now:

<div id="app">

<filtering v-bind:filter="filter" v-on:change-

filter-field="changeFilter" v-on:change-filter-

query="changeQuery"></filtering>

<table>

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

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

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

</template>

</table>

</div>

<script type="text/x-template" id="filtering-

template">

<form>