0

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"

2 Answers 2

3

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)
})
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, it helped
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.