-
-
Save cfjedimaster/9096aabdfdb8a09c1f02d5fe5dec8c30 to your computer and use it in GitHub Desktop.
| 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); | |
| } | |
| } | |
| }); |
It's because this is being bound to a different context inside your .filter function and Vue is no longer proxying it. These are cases that I reach for arrow functions since the context says the same.
computed: {
filteredBlueprints() {
return this.blueprints.filter( bp => {
return this.filter === "" ? true : bp.title.indexOf( this.filter ) >= 0;
} );
}
}
This assumes you are compiling your code. If you are not, your example above, something like var that = this, or binding this to the function ( this.blueprints.filter( function( bp ) { /*...*/ }.bind( this ) ) ) are the other ways to go.
But I swore I remember reading in the Vue docs to avoid arrow function? And no - no compiling.
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.
Copying this.filter to thatFilter and using it inside my filter() seems to fix it. But is that ok?