[Vuejs]-Javascript – Test for null in filter

by

2👍

✅

You can use something called Optional Chaining.

return this.keyword ? this.records.filter(item =>
                        item.name?.includes(this.keyword) ||
                        item.location?.includes(this.keyword) ||
                        item.status?.includes(this.keyword) || 
                        item.vendor?.includes(this.keyword) ||
                        item.model?.includes(this.keyword) ||
                        item.serial?.includes(this.keyword) ||
                        item.product_number?.includes(this.keyword)

                    )
                    : this.records

0👍

The errors is happening because at least one of your object properties is set to null. I would create a new function to handle all of your use cases and null checks.

computed: { 
    items () {
        return this.keyword
            ? this.records.filter(item =>
                this.checkProperty(item.name) ||
                this.checkProperty(item.location) ||
                this.checkProperty(item.status) ||
                this.checkProperty(item.vendor) || 
                this.checkProperty(item.model) ||
                this.checkProperty(item.serial) ||
                this.checkProperty(item.product_number)
            )
            : this.records
     },
}

checkProperty(prop) {
    return prop ? prop.includes(this.keyword) : false;
}

0👍

You could define an array of keys

const keys = ['name', 'location', 'status', 'vendor', 'model', 'serial', 'product_number'];

and take later another iteration for the keys with a optional chaining operator ?..

this.keyword
    ? this.records.filter(item => keys.some(key => item[key]?.includes(this.keyword)))
    : this.records

Leave a comment