バインド機能VueJSでの意味

Question

私はVueJSでbindメソッドを使用しているスクリプトを持っています。フィルタの目的は、性別またはすべてに基づいた人々を返すことです。

私はHTMLコードがあります。以下は

<div id="demo"> 
     <div class="radio"> 
      <label> 
       <input type="radio" name="gender" v-model="gender" value="all"> All 
      </label> 
     </div> 

     <div class="radio"> 
      <label> 
       <input type="radio" name="gender" v-model="gender" value="male"> Male 
      </label> 
     </div> 

     <div class="radio"> 
      <label> 
       <input type="radio" name="gender" v-model="gender" value="female"> Female 
      </label> 
     </div> 

     <ul> 
      <!-- Don't forget about Vue's filterBy filter. This is only for ex. --> 
      <li v-for="person in people | gender">{{ person.name }}: {{ person.gender }}</li> 
     </ul> 
    </div> 

は、JavaScriptコードです：

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)); 
     } 
    } 

}); 

私はかなりバインド（これ）は、このような状況で何をするか理解していません。誰も私にそれを説明することはできますか？ありがとう、

Answer 1

これは閉鎖と文脈についてですthisです。 （this）を関数にバインドすると、そのコンテキストがthisというようにバインドされた関数内で変更されます。thisは、バインドされている関数の内部ではなく、外側のクロージャーに残り、その外側のスコープからメソッドとプロパティを利用できます。

あなたの例では、gender（）関数のクロージャ内で利用できるthis.genderとして参照されているVueのデータプロパティ 'gender'（ 'all'に等しい）を作成していますが、そうでない場合は未定義です。

これは、ES5では非常に一般的なパターンです。しかし、ES6の矢印機能に移動すると、それが一般的なので、このバインディングは実際にはデフォルトです。あなたのgender（）関数はES6でこれと書かれます。

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

はるかに簡潔でthis :)