As a newcomer to vueJS, I'm eager to use the template below to kickstart my project and make it compatible with IE11:
Link: codepen erickarbe/pen/pLbRqQ
The initial code snippet is as follows:
computed: {
filteredMembers() {
return this.members.filter(member => {
let first = member.First.toLowerCase()
let last = member.Last.toLowerCase()
let fresult = first.includes(this.searchQuery.toLowerCase())
let lresult = last.includes(this.searchQuery.toLowerCase())
if(fresult)
return fresult
if(lresult)
return lresult
})
},
To make it work in IE11, I attempted to utilize polyfill and modified the code like so:
computed: {
filteredMembers: function(){
return this.members.filter(function(member){
let first = member.First.toLowerCase()
let last = member.Last.toLowerCase()
//Error for 'this'
let fresult = first.includes(this.searchQuery.toLowerCase()) //'this' Error
let lresult = last.includes(this.searchQuery.toLowerCase()) //'this' Error
//Error for 'this'
if(fresult)
return fresult
if(lresult)
return lresult
})
},}
I encountered an error when trying to use 'this' for `this.searchQuery.toLowerCase())`.
However, I managed to solve it by using 'var ths = this' as shown below:
computed: {
filteredMembers: function(){
var ths = this;
........
let fresult = first.includes(ths.searchQuery.toLowerCase())
let lresult = last.includes(ths.searchQuery.toLowerCase())
Is this approach too cumbersome or inefficient for obtaining the 'this' value?
Are there better ways to access the current 'this' value? Thank you!