Error in filter function for VueJs - filtering

Question

I want to filter the following in VueJs 2.
My Component is the following:
<template>
Search <input name="query" v-model="query" class="form-control">
<table class="table">
<thead>
<tr>
<th>User name</th>
<th>User email/th>
<th>Get logs</th>
</tr>
</thead>
<tbody v-for="user in filteredUsers">
<tr>
<td> {{ user.firstname }} </td>
<td> {{ user.lastname }} </td>
<td> <a v-on:click="getUserLogs(user.user_id)">Show</a> </td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import ConnectionService from '../../components/services/ConnectionService';
const connectionService = new ConnectionService();
export default {
data() {
return {
users: [],
query: '',
betweenDates: {
from: '',
to: ''
},
logs: {},
logsVisibility: false
}
},
created() {
this.getUsers();
},
computed: {
filteredUsers() {
return this.findBy(this.users, this.query, 'lastname')
}
},
methods: {
getUsers() {
this.$http.get(hostname + 'name=person_list&session_id=' + sessionApiId).then(response => {
this.users = connectionService.renderMultipleInstances(response.body);
}, response => {
// error callback
});
},
getUserLogs(id) {
let self = this;
axios.post('/logs/get_user_logs', {
userId: id,
}).then(function (response) {
self.logs = response.data;
self.logsVisibility = true;
console.log(response.data);
});
},
findBy(list, value, column) {
return list.filter(function (item) {
return item[column].includes(value)
})
}
}
}
</script>
I have the following data to filter through it:
users:Array[4095]
0:Object
firstname:"Анастасия"
id:206
lastname:"Никифорова"
middlename:"Юрьевна"
user_id:192
1:Object
firstname:null
id:3362
lastname:null
middlename:null
user_id:2046
...
And error is the following:
[Vue warn]: Error in render function: "TypeError: Cannot read property 'includes' of null"

Answer 1

In 1:Object lastname:null. It causes your error
You can add line before return
item[column] || (item[column] = '');
or
return list.filter(function (item) {
return (item[column] || '').includes(value)
})

Answer 2

I had a similar problem to fix it I replace every null value from my object with a ' ' (empty string)