Не применяется фильтр к people, после нажатия на checkbox
new Vue({
el: '#app',
data: {
checked: false,
search: '',
people: [
{ name: 'John', age: 10 },
{ name: 'Mary', age: 19 },
{ name: 'Mike', age: 21 },
{ name: 'Adam', age: 35 },
{ name: 'Julie', age: 29 }
],
},
computed: {
filterPeople() {
return this.people.filter( f => f.name.toLowerCase().includes(this.search.toLowerCase()))
}
},
methods: {
changePeople() {
if(this.checked) {
return this.users.filter(f => f.age > 20)
}
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
<div class="input-field">
<input type="checkbox" v-model="checked" v-on:change="changePeople()">
<label>Показывать больше 20</label>
</div>
<div class="input-field">
<input type="text" v-model="search">
<label>Search on people</label>
</div>
<div id="app">
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr v-for="person of filterPeople">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
</tr>
</table>
</div>
</div>