Vue2で再利用可能な「CheckAll」チェックボックスソリューションを作成するには

Question

APIから取得したオブジェクトのリストを表示するための再利用可能な「すべてをチェック」ソリューションを作成しようとしています。

私はこの例ではhttps://codepen.io/anon/pen/aLeLOZの計算されたプロパティのget/setメソッドが本当に好きですが、同じ関数を繰り返し書き直し、別のチェックボックス状態リストを維持するのは面倒です。

index.htmlを

<div id="app"> 

    <input type="checkbox" v-model="selectAll1"> Check All 
    <div v-for="person in list1"> 
    <input type="checkbox" v-model="checkbox" :value="person.id"> 
    <span>{{ person.name }}</span> 
    </div> 
    <hr/> 
    <input type="checkbox" v-model="selectAll2"> Check All 
    <div v-for="person in list2"> 
    <input type="checkbox" v-model="checkbox2" :value="person.id"> 
    <span>{{ person.name }}</span> 
    </div> 
</div> 

main.js

new Vue({ 
    el: '#app', 
    data() { 
    return { 
     list1: [ 
     { id: 1, name: 'Jenna1'}, 
     { id: 2, name: 'Jenna2'}, 
     { id: 3, name: 'Jenna3'}, 
     { id: 4, name: 'Jenna4'} 
     ], 
     list2: [ 
     { id: 1, name: 'Mary1'}, 
     { id: 2, name: 'Mary2'}, 
     { id: 3, name: 'Mary3'}, 
     { id: 4, name: 'Mary4'} 
     ], 
     checkbox: [], 
     checkbox2: [] 
    } 
    }, 
    computed: { 
    selectAll1: { 
     get: function() { 
      return this.list1 ? this.checkbox.length === this.list1.length : false 
     }, 
     set: function (value) { 
      let selected = [] 

      if (value) { 
      this.list1.forEach(function (bf) { 
       selected.push(bf.id) 
      }) 
      } 

      this.checkbox = selected 
     } 
     }, 
    selectAll2: { 
     get: function() { 
      return this.list2 ? this.checkbox2.length === this.list2.length : false 
     }, 
     set: function (value) { 
      let selected = [] 

      if (value) { 
      this.list2.forEach(function (bf) { 
       selected.push(bf.id) 
      }) 
      } 

      this.checkbox2 = selected 
     } 
     }, 
    } 
}); 

どのように私はできるだけ頻繁に必要に応じて含めることができます。この例では動作しますresuableのSelectAll（）関数を作ることができますか？

各リストのチェックボックスの状態を維持できるクラスを作成できますが、v-modelディレクティブを使用するための計算済みプロパティとして機能しますか？

Answer 1

（あなたが保つことができるそれはまったく同じではないのですが、方法ベースのソリューションではなく、V-モデル= "selectAll1" の@をクリック= "selectUs"

と

methods: { 
    selectUs: function(){ 
    if (this.checkbox.length <= this.list1.length) { 
     this.checkbox = Array.from(Array(this.list1.length + 1).keys()) 
    } else { 
     this.checkbox = [] 
    } 
    } 
} 

だろうgetすべてが選択されているかどうかを追跡し、メソッド内でif（selectAll1）{etc}を使用する計算プロパティの一部）