TypeError: Cannot read property'indexOf' of null problem solution

 

Search function: https://blog.csdn.net/bbs11007/article/details/110948483

 

According to the wording of this search function, there is a problem with the local debugging tree when searching, but after the package is built as dist, it shows an error after putting it on the server: Cannot read property'indexOf' of null

 let result = this.pages1.values.filter(row => {//this.pages1.values这个是表内所有数据
              //搜索那列的内容，这里搜索name、id等列的内容
              return row.name.indexOf(this.search1) > -1 
                || row.id.indexOf(this.search1) > -1 
                || row.code.indexOf(this.search1) > -1 
                || row.note.indexOf(this.search1) > -1;
            });

Error message:

TypeError: Cannot read property 'indexOf' of null
    at app.43208ea5.js:1
    at Array.filter (<anonymous>)
    at o.sousuo (app.43208ea5.js:1)
    at click (app.43208ea5.js:1)
    at it (chunk-vendors.ffbff91e.js:34)
    at o.n (chunk-vendors.ffbff91e.js:34)
    at it (chunk-vendors.ffbff91e.js:34)
    at o.In.e.$emit (chunk-vendors.ffbff91e.js:34)
    at o.handleClick (chunk-vendors.ffbff91e.js:1)
    at it (chunk-vendors.ffbff91e.js:34)

That is to say, when the indexOf is used, the previous row.name is reported as an error. All need to judge whether these are empty before using indexOf.

 if(row.name!=null || row.id!=null || ....) This is too much trouble

We can write a method:

contains(prop, str) { //打包到服务器：
            if (prop === null || prop === undefined) {
                return false;
            } else {
                return prop.indexOf(str) > -1;
                //如果需要大小写匹配
                //return prop.indexOf(str.toUpperCase()) > -1;
            }
        },

Then modify the wording, the wording of VUE below, call contains to add this, if it is js, remove this

 let result = this.pages1.values.filter(row => {//this.pages1.values这个是表内所有数据
              //搜索那列的内容，这里搜索name、id等列的内容
               return this.contains(row.name, this.search1) 
                || this.contains(row.id, this.search1) 
                || this.contains(row.code, this.search1) 
                || this.contains(row.note, this.search1) 
            });