TypeError: Cannot read properties of undefined (reading 'type') at eval ... at Array.sort (<anonymous>)

Question

I need your help with this error I am facing colleagues. I am new to vue so I am finding it quite difficult to solve the error though I what what exactly is causing the error. I am creating a datatable in vue and I am trying to achieve data sorting with this tutorial I am following but end up getting the following error:

TypeError: Cannot read properties of undefined (reading 'type')

 computed: {
        filteredAccommodations(){
            let accommodations = this.accommodations;
            if (this.search) {
                accommodations = accommodations.filter((row) => {
                    return Object.keys(row).some((key) => {
                        return String(row[key]).toLowerCase().indexOf(this.search.toLowerCase()) > -1;
                    })
                });
            }

            let sortKey = this.sortKey;

            let order = this.sortOrders[sortKey] || 1;
            if(sortKey){
                accommodations = accommodations.slice().sort((a, b) => {
                    let index = this.getIndex(this.columns, 'name', sortKey);
                    a = String(a[sortKey]).toLowerCase();
                    b = String(b[sortKey]).toLowerCase();
                    
                    if (this.columns[index].type && this.columns[index].type === 'date') {
                        return (a === b ? 0 : new Date(a).getTime() > new Date(b).getTime() ? 1 : -1) * order;
                    } else if (this.columns[index].type && this.columns[index].type === 'number') {
                        return (+a === +b ? 0 : +a > +b ? 1 : -1) * order;
                    } else {
                        return (a === b ? 0 : a > b ? 1 : -1) * order;
                    }
                });
            }
            return accommodations;
            
        },

        paginatedAccommodations(){
            return this.paginate(this.filteredAccommodations, this.length, this.pagination.currentPage); 
        }
    },

Answer 1

The reason for your error is because the value of this.columns[index] is a null value ,Adding a null check in ur if loop might help you solve this but I suggest you to check for the reason of null value.

computed: {
 filteredAccommodations() {
    let accommodations = this.accommodations;
    if (this.search) {
        accommodations = accommodations.filter((row) => {
            return Object.keys(row).some((key) => {
                return String(row[key]).toLowerCase().indexOf(this.search.toLowerCase()) > -1;
            })
        });
    }

    let sortKey = this.sortKey;

    let order = this.sortOrders[sortKey] || 1;
    if (sortKey) {
        accommodations = accommodations.slice().sort((a, b) => {
            let index = this.getIndex(this.columns, 'name', sortKey);
            a = String(a[sortKey]).toLowerCase();
            b = String(b[sortKey]).toLowerCase();

            if (this.columns[index] && this.columns[index].type && this.columns[index].type === 'date') {
                return (a === b ? 0 : new Date(a).getTime() > new Date(b).getTime() ? 1 : -1) * order;
            } else if (this.columns[index] && this.columns[index].type && this.columns[index].type === 'number') {
                return (+a === +b ? 0 : +a > +b ? 1 : -1) * order;
            } else {
                return (a === b ? 0 : a > b ? 1 : -1) * order;
            }
        });
    }
    return accommodations;

},

paginatedAccommodations() {
    return this.paginate(this.filteredAccommodations, this.length, this.pagination.currentPage);
}
},