Bind Function Meaning in VueJS

So this is about closures and context of this. When you bind(this) to a function, it changes the context (or "lexical scope") of this to within the bound function, this remains in the outer closure rather than inside the function that is bound, thus making methods and properties available from that outer scope.

In your example, you are making Vue's data property 'gender' (which is equal to 'all') - which you referenced as this.gender - available within the gender() function's closure, whereas otherwise it would be undefined.

As a note, this is very common pattern with ES5. But if you move to arrow functions of ES6, because it is so common, this binding is actually the default. Your gender() function would be written as this in ES6.

gender (people) => {
  if (this.gender == 'all') return people
  return people.filter((person) => person.gender === this.gender)
}

Much more concise and no need to bind the this :)

Update: 2019 - I also would not use a variable and a function with the same name - this.gender (variable) and this.gender() (function).