Skip to content

Instantly share code, notes, and snippets.

@cfjedimaster

cfjedimaster/app.js

Created Aug 30, 2017
Embed
What would you like to do?
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);
}
}
});
@cfjedimaster

This comment has been minimized.

Copy link
Owner Author

@cfjedimaster cfjedimaster commented Aug 30, 2017

Copying this.filter to thatFilter and using it inside my filter() seems to fix it. But is that ok?

	computed:{
		filteredBlueprints: function() {
			console.log(this.filter +' is filter');
			let thatFilter = this.filter;
			return this.blueprints.filter(function(bp) {
				console.log('checking '+bp.title+' to the filter '+this.filter);
				if(thatFilter === '') return true;
				if(bp.title.indexOf(thatFilter) >= 0) return true;
				return false;
			});
		}
	},
@elpete

This comment has been minimized.

Copy link

@elpete elpete commented Aug 30, 2017

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.

@cfjedimaster

This comment has been minimized.

Copy link
Owner Author

@cfjedimaster cfjedimaster commented Aug 30, 2017

But I swore I remember reading in the Vue docs to avoid arrow function? And no - no compiling.

@elpete

This comment has been minimized.

Copy link

@elpete elpete commented Aug 31, 2017

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.

@cfjedimaster

This comment has been minimized.

Copy link
Owner Author

@cfjedimaster cfjedimaster commented Aug 31, 2017

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
You can’t perform that action at this time.