title: Bind Function Meaning in VueJS
body: <p>I have a script which is using bind method in VueJS. The purpose of the filter is to return people basing on gender or all. </p>
  
  <p>I have the HTML code: </p>
  
  <pre><code>&lt;div id="demo"&gt;
          &lt;div class="radio"&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="gender" v-model="gender" value="all"&gt; All
              &lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="radio"&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="gender" v-model="gender" value="male"&gt; Male
              &lt;/label&gt;
          &lt;/div&gt;
  
          &lt;div class="radio"&gt;
              &lt;label&gt;
                  &lt;input type="radio" name="gender" v-model="gender" value="female"&gt; Female
              &lt;/label&gt;
          &lt;/div&gt;
  
          &lt;ul&gt;
              &lt;!-- Don't forget about Vue's filterBy filter. This is only for ex. --&gt;
              &lt;li v-for="person in people | gender"&gt;{{ person.name }}: {{ person.gender }}&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Below is the JavaScript code:</p>
  
  <pre><code>new Vue({
      el: '#demo',
  
      data: {
          gender: 'all',
  
          people: [
              { name: 'Jeff', gender: 'male' },
              { name: 'Jack', gender: 'male' },
              { name: 'Steven', gender: 'male' },
              { name: 'Kate', gender: 'female' },
              { name: 'Susan', gender: 'female' },
              { name: 'Claire', gender: 'female' }
          ]
      },
  
      filters: {
          gender: function(people) {          
              if (this.gender == 'all') return people;
  
              return people.filter(function(person) {
                  return person.gender == this.gender;
  
              }.bind(this));
          }
      }
  
  });
  </code></pre>
  
  <p>I don't quite understand what <strong>bind(this)</strong> does in this situation. Can anyone explain it to me? Thanks,</p>