Vueでの3ステートチェックボックス

前提・実現したいこと

複数のチェックボックスで、
0. チェックされたチェックボックスがない場合は、「全員」チェックボックスのチェックを外す

チェックボックスが全てチェックされている場合は、「全員」チェックボックスにチェックを入れる
それ以外の場合は、「全員」チェックボックスをindeterminateにする

発生している問題・エラーメッセージ

初期状態では、1.～3.ができていますが、各チェックボックスがクリックされたとき、「全員」チェックボックスが反応しません。

該当のソースコード

Vue
1<template>
2  <transition name="ChoosePeopleDlg">
3    <div class="modal-mask">
4      <div class="modal-wrapper">
5        <div class="modal-container normalColor">
6
7          <div class="modal-header">
8            <h2>{{title}}</h2>
9          </div>
10
11          <div class="modal-body">
12            <slot name="body">
13              <label>
14                <input type="checkbox"  @click="toggleAll" ref="checkAll" v-model="allChecked" 
15                :indeterminate.prop="! everybody && ! nobody">
16                全員
17              </label>
18              <br>
19              <br>
20              <label v-for="person in allPeople" :key="person">
21                <input type="checkbox" v-model="chosenMap[person]" @click="checkChanged"/>
22                {{person}}
23              </label>
24            </slot>
25          </div>
26
27          <div class="modal-footer">
28            <slot name="footer">
29              <button @click="ok" class="buttonColor">
30                ＯＫ
31              </button>&nbsp;&nbsp;
32              <button @click="$emit('cancel')" class="buttonColor">
33                キャンセル
34              </button>
35            </slot>
36          </div>
37        </div>
38      </div>
39    </div>
40  </transition>
41</template>
42
43<script>
44export default {
45  name: 'ChoosePeopleDlg',
46  props: {
47      title: String,
48      allPeople: Array,
49      people: Array
50  },
51  computed: {
52    chosenMap: function() {
53        let map = {};
54         this.allPeople.forEach((person) => {
55            map[person] = (this.chosenPeople.includes(person));
56        });
57        return map;
58    },
59    count: function() {
60        let count = 0;
61        for (let person in this.chosenMap) {
62            if (this.chosenMap[person]) {
63               count++; 
64            }
65        }
66        return count;
67    },
68    nobody: function() {
69        return this.count === 0;
70    },
71    everybody: function() {
72        return this.count === this.allPeople.length;
73    }
74  },
75  methods: {
76      toggleAll: function() {
77          if (this.everybody) {
78              this.toNobody();
79          }
80          else {
81              this.toEverybody();
82          }
83      },
84      toNobody: function() {
85        this.chosenPeople = [];
86      },
87      toEverybody: function() {
88        this.chosenPeople = [];
89        this.allPeople.forEach((person) => {
90          this.chosenPeople.push(person);
91        });
92      },
93      checkChanged: function() {
94        if (! this.everybody && ! this.nobody) {
95        }
96        else {
97          this.allChecked = this.everybody
98        }
99      },
100      ok: function() {
101        let ary = [];
102        for (let person in this.chosenMap) {
103            if (this.chosenMap[person]) {
104              ary.push(person); 
105            }
106        }
107        this.$emit('ok', ary);
108      }
109  },
110  data() {
111      return {
112          chosenPeople: this.people || [],
113          allChecked: false,
114      }
115  },
116  mounted: function(){
117    this.checkChanged();
118  }
119}
120</script>

試したこと

Vue
1      checkChanged: function() {
2        const checkAll = this.$refs.checkAll;
3        if (! this.everybody && ! this.nobody) {
4          checkAll.indeterminate = true;
5        }
6        else {
7          checkAll.indeterminate = false;
8          checkAll.checked = this.everybody;
9        }
10      }

補足情報（FW/ツールのバージョンなど）

@vue/cli 4.2.2

行動規範の内容に同意します

回答2件

投稿しようとしたら解決済みに切り替わったみたいですが、参考までにおいておきます。
こういうやり方もあるんだなぁ程度に見ていただければと思います。
https://jsfiddle.net/ocwsnt1v/39/

投稿2020/03/07 10:42

NozomuIkuta

総合スコア1260

naomi3

2020/03/07 10:47

ありがとうございます。

行動規範の内容に同意します

ベストアンサー

以下のような感じでしょうか

<template>
  <transition name="ChoosePeopleDlg">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container normalColor">
          <div class="modal-header">
            <h2>{{ title }}</h2>
          </div>

          <div class="modal-body">
            <slot name="body">
              <label>
                <input
                  type="checkbox"
                  @click="toggleAll"
                  ref="checkAll"
                  :checked="everybody"
                  :indeterminate.prop="!everybody && !nobody"
                />
                全員
              </label>
              <br />
              <br />
              <label v-for="person in allPeople" :key="person">
                <input type="checkbox" v-model="chosenMap[person]" />
                {{ person }}
              </label>
            </slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              <button @click="ok" class="buttonColor">
                ＯＫ</button
              >&nbsp;&nbsp;
              <button @click="$emit('cancel')" class="buttonColor">
                キャンセル
              </button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "ChoosePeopleDlg",
  props: {
    title: String,
    allPeople: Array,
    people: Array
  },
  computed: {
    count: function() {
      let count = 0;
      for (let person in this.chosenMap) {
        if (this.chosenMap[person]) {
          count++;
        }
      }
      return count;
    },
    nobody: function() {
      return this.count === 0;
    },
    everybody: function() {
      return this.count === this.allPeople.length;
    }
  },
  methods: {
    toggleAll: function() {
      if (this.everybody) {
        this.toNobody();
      } else {
        this.toEverybody();
      }
    },
    toNobody: function() {
      for (let person in this.chosenMap) {
        this.chosenMap[person] = false;
      }
    },
    toEverybody: function() {
      for (let person in this.chosenMap) {
        this.chosenMap[person] = true;
      }
    },
    ok: function() {
      let ary = [];
      for (let person in this.chosenMap) {
        if (this.chosenMap[person]) {
          ary.push(person);
        }
      }
      this.$emit("ok", ary);
    }
  },
  data() {
    let map = {};
    this.allPeople.forEach(person => {
      map[person] = this.people.includes(person);
    });

    return {
      chosenMap: map
    };
  },
  mounted: function() {}
};
</script>

修正点はdiffして確認してください。基本的に以下のようにしました。