简体   繁体   中英

Vue Component Poor IE Performance

A previous developer at my company wrote a Vue.js typeahead component and everything seems to be fine with it until I get into Internet Explorer 11. When typing into an input that has keyup function binded to it it sometimes doesn't accept characters a user is inputting. This seems to be a performance issue with the code I am working with. Below is the code that is causing the issues, if I remove it all and just do nothing the input has no issues. Are there any performance suggestions I can make to speed it up?

    searchResults: function(e){
        this.isShown = true
        this.selectedIndex =  0
        this.filterOptions()

        if(this.wildcardSearch){
            var searchObj = {}
            searchObj[this.displayProp] = 'Search For: <strong>'+this.search+'</strong>'
            this.matches.unshift(searchObj)
        }
        // Show first 5 results
        this.matches = this.matches.splice(0,5)
    },
    filterOptions: function(){
        var lowSearch = this.search.toLowerCase()
        var that = this
        if (this.search) // don't filter on empty string
            this.matches = this.options.map(function(o){
                if (o[that.displayProp].toLowerCase().indexOf(lowSearch) > -1)
                    return o
            }).filter(function(o){return o})
    },

Both map and filter being used is redundant, specially since map is being used as filter and filter is not really doing anything.

What about this:

this.matches = this.options.filter(function(o) {
  return o[that.displayProp].toLowerCase().indexOf(lowSearch) > -1
})

That said, I don't see why this would cause a performance impact, but it's really the only issue I see (I'd have written this as a comment if I could).

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM