Created
August 30, 2017 18:22
-
-
Save cfjedimaster/9096aabdfdb8a09c1f02d5fe5dec8c30 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let bpApp = new Vue({ | |
el:'#bpList', | |
data:{ | |
filter:'', | |
blueprints:[] | |
}, | |
created:function() { | |
fetch('./data.json') | |
.then(res => res.json()) | |
.then(res => { | |
this.blueprints = res; | |
}); | |
}, | |
computed:{ | |
filteredBlueprints: function() { | |
console.log(this.filter +' is filter'); | |
return this.blueprints.filter(function(bp) { | |
//filter is ALWAYS undefine. | |
console.log('checking '+bp.title+' to the filter '+this.filter); | |
if(this.filter === '') return true; | |
if(bp.title.indexOf(this.filter) >= 0) return true; | |
return false; | |
}); | |
} | |
}, | |
methods:{ | |
filterBP:function() { | |
console.log(this.filter); | |
} | |
} | |
}); |
No arrow functions on the Vue instance. That means
new Vue( {
created: () => {},
methods: {
someMethod: () => {}
}
} );
Would cause problems because this
would refer to the wrong context.
If you are not compiling, I think the best approach is to just var vm = this;
at the top of the functions you use callbacks in.
I'll try to keep that in mind - thanks. Btw, this is my app - feel free to rip me a new one, but maybe wait for the blog post (so I don't have to keep checking here ;) - https://github.com/cfjedimaster/nomanssky. Specifically the client folder.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
But I swore I remember reading in the Vue docs to avoid arrow function? And no - no compiling.