Vue.js で computedのsetプロパティとgetプロパティに変数を渡すにはどうすればいいですか

Question

ボタンを押すと、チェックボックスを全選択する機能を実装しました。

今回、チェックボックスが二種類あるので、二つ分用意しました。

  computed : {
    selectAllGenres : {
      get : function() {
        if(this.chkGenres.length == this.genres.length){
          return true;
        }
        else {
          return false;
        }
      },
      set : function (value) { //全選択のチェックボックスを操作した場合
        let chkArr = new Array();
 
        if(value){
          this.genres.forEach(function(genre){
            chkArr.push(genre.name);
          });
        }
 
        this.chkGenres = chkArr;
      }
    }
  }

  computed : {
    selectAllDepartments : {
      get : function() {
        if(this.chkDepartments.length == this.departments.length){
          return true;
        }
        else {
          return false;
        }
      },
      set : function (value) { // 全選択のチェックボックスを操作した場合
        let chkArr = new Array();
 
        if(value){
          this.departments.forEach(function(department){
            chkArr.push(department.name);
          });
        }
 
        this.chkDepartments = chkArr;
      }
    }
  }

ほぼ同じ記述ですので、こんな風に関数をまとめたいです
(試してないので多分動きませんがイメージとして)

  computed : {
    selectAll : {
      get : function(chkItems, items) {
        if(chkItems.length == items.length){
          return true;
        }
        else {
          return false;
        }
      },
      set : function (value, chkItems, items) { //全選択のチェックボックスを操作した場合
        let chkArr = new Array();
 
        if(value){
          this.items.forEach(function(item){
            chkArr.push(item.name);
          });
        }
 
        chkItems = chkArr;
      }
    },
    selectAllGenres : {
      get : this.selectAll.get(this.chkGenres, this.genres),
      set : this.selectAll.set(value, this.chkGenres, this.genres)
    },
    selectAllDepartments : {
      get : this.selectAll.get(this.chkDepartments, this.departments),
      set : this.selectAll.set(value, this.chkDepartments, this.departments)
    }
  }

私のやりたいことを実現する方法はありますか？

Comments

[sousuke]

htmlとdataの提示もお願いしたい。

Answer 1

methodsでやることだと思うけどなぜcomputedなの？

余計なおせっかいでindeterminate かっこいいだるるるおぉ！？
jsfiddle

<div id="app">
  <label>
    <input type="checkbox"
      v-model.lazy="items1All"
      @change="allChange(items1All,items1)"
      :indeterminate.prop="isIndeterminate(items1)">AllChange!
  </label>
  <ul>
    <template v-for="(i,index) in items1" :key="i.text">
      <li><label><input type="checkbox" v-model="i.check">{{ i.text }}</label></li>
    </template>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    items1All: false,
    items1: [{
      check: false,
      text: "item1"
    }, {
      check: false,
      text: "item2"
    }, {
      check: false,
      text: "item3"
    }, {
      check: false,
      text: "item4"
    }, {
      check: false,
      text: "item5"
    }]
  },
  methods: {
    isIndeterminate: function(arr) {
      const ret = !(arr.every((v) => v.check) || arr.every((v) => !v.check))
      if (ret) {
        this.items1All = false;
      }
      return ret;
    },
    allChange: function(val, arr) {
      arr.forEach((v) => {
        v.check = val
      })
    }
  }
})

isIndeterminateのfunctionもっとかっこよく書ける人いない？（他人事）