Vueで絞り込み機能と「全てチェックボタン」を連動させたがうまく動作しない

Vueでチェックボックスで絞り込みができる機能を実装しました。

さらに「全てチェックボタン」をつけたのですが、上記の機能とうまく連動しません。

尚、絞り込みを実装しない段階で「全てチェックボタン」のみ動かした際はうまく動作をしておりました。

２つの機能の連動に際し、もし不具合になりそうな箇所がありましたら教えて頂きたいです。

      <div id="app">
          <table class="table">
              <thead class="thead-dark">
              <tr>
                  <th>
                      <input type="checkbox" v-on:click="clickAllChecked($event)" v-model="AllChecked" value="1">
                  </th>
                  <th>全てチェック</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                  <td>
                  <input type="checkbox" class="facilitychk" value="1" v-on:click="clickChecked($event)" v-model="show1">
                  </td>
                  <td>東京</td>
              </tr>
              <tr>
                  <td>
                  <input type="checkbox" class="facilitychk" value="1" v-on:click="clickChecked($event)" v-model="show2">
                  </td>
                  <td>大阪</td>
              </tr>
              <tr>
                  <td>
                  <input type="checkbox" class="facilitychk" value="1" v-on:click="clickChecked($event)" v-model="show3">
                  </td>
                  <td>名古屋</td>
              </tr>
              <p>{{this.filteredList.length}}件<p>
              </div>
              </tbody>
          </table>
      </div>


    <script src="https://unpkg.com/vue@2.5.17"></script>
      <script>


      var app = new Vue({
        el: '#app',
        data: {
            dataList : [
            { id: 121, city: "Osaka" },
            { id: 123, city: "Fukuoka" },
            { id: 425, city: "Osaka" },
            { id: 645, city: "Tokyo" },
            { id: 326, city: "Osaka" },
            { id: 876, city: "Tokyo" },
            { id: 456, city: "Osaka" },
            { id: 335, city: "Osaka" },
            { id: 471, city: "Tokyo" },
            { id: 345, city: "Osaka" },
            { id: 857, city: "Fukuoka" },
            { id: 455, city: "Osaka" },
            { id: 997, city: "Osaka" },
            { id: 121, city: "Tokyo" },
            { id: 115, city: "Osaka" },
            { id: 668, city: "Fukuoka" }
        ],
        AllChecked: 0,
        show1: false,
        show2: false,
        show3: false,
        },
        methods: {  //  全てチェック機能
          clickAllChecked: function (event) {
            var facilitychk = document.getElementsByClassName('facilitychk');
            var actionFlg;
            if (event.target.checked == true) {
              actionFlg = true;
            } else {
              actionFlg = false;
            }
            for (var i = 0; facilitychk.length > i; i++) {
              facilitychk[i].checked = actionFlg;
            }
          },
          clickChecked: function(event) {
            if(event.target.checked == false){
              this.AllChecked = 0;
            }
          }
      },

      computed: {

        filteredList: function() {  //  絞り込み機能
          var newList = [];
          for (var i=0; i<this.dataList.length; i++) {
            var isShow = true;
            if (!this.show1 && this.dataList[i].city == "Tokyo") {
              isShow = false;
            }
            if (!this.show2 && this.dataList[i].city == "Osaka") {
              isShow = false;  
            }
            if (!this.show3 && this.dataList[i].city == "Fukuoka") {
              isShow = false;
   	  }
            if (isShow) {
              newList.push(this.dataList[i]);
            }
          }
          return newList;
   }
    }
      });
      </script>

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

回答1件

ベストアンサー

全てチェックの状態は、各チェックの結果を元に computed で求めると状態管理がスッキリすると思います。試しにコードを書いてみたので、参考にしてください

HTML
1<div id="app">
2  <table class="table">
3    <thead class="thead-dark">
4      <tr>
5        <th>
6          <input type="checkbox" v-on:click="toggleAllCheck" :checked="isAllCheck">
7        </th>
8        <th>全てチェック</th>
9      </tr>
10    </thead>
11    <tbody>
12      <tr>
13        <td>
14          <input type="checkbox" class="facilitychk" v-model="checkboxList.Tokyo">
15        </td>
16        <td>東京</td>
17      </tr>
18      <tr>
19        <td>
20          <input type="checkbox" class="facilitychk" v-model="checkboxList.Osaka">
21        </td>
22        <td>大阪</td>
23      </tr>
24      <tr>
25        <td>
26          <input type="checkbox" class="facilitychk" v-model="checkboxList.Fukuoka">
27        </td>
28        <td>福岡</td>
29      </tr>
30    </tbody>
31  </table>
32  <p>{{this.filteredList.length}}件</p>
33</div>

JavaSCript
1var app = new Vue({
2  el: '#app',
3  data: {
4    dataList : [
5      { id: 121, city: "Osaka" },
6      { id: 123, city: "Fukuoka" },
7      { id: 425, city: "Osaka" },
8      { id: 645, city: "Tokyo" },
9      { id: 326, city: "Osaka" },
10      { id: 876, city: "Tokyo" },
11      { id: 456, city: "Osaka" },
12      { id: 335, city: "Osaka" },
13      { id: 471, city: "Tokyo" },
14      { id: 345, city: "Osaka" },
15      { id: 857, city: "Fukuoka" },
16      { id: 455, city: "Osaka" },
17      { id: 997, city: "Osaka" },
18      { id: 121, city: "Tokyo" },
19      { id: 115, city: "Osaka" },
20      { id: 668, city: "Fukuoka" }
21    ],
22    checkboxList: {
23    	Tokyo: false,
24      Osaka: false,
25      Fukuoka: false,
26    },
27  },
28  methods: {  //  全てチェック機能
29    toggleAllCheck: function () {
30    	if (this.isAllCheck) {
31				for (const city in this.checkboxList) {      	
32        	this.checkboxList[city] = false;
33        }
34      } else {
35				for (const city in this.checkboxList) {      	
36        	this.checkboxList[city] = true;
37        }      
38      }
39    },
40  },
41  computed: {
42  	isAllCheck: function() {
43			for (const city in this.checkboxList) {      	
44      	if (!this.checkboxList[city]) {
45        	return false;
46        }
47      }
48      return true;
49    },
50    filteredList: function() {  //  絞り込み機能
51      var newList = [];
52      for (var i=0; i<this.dataList.length; i++) {
53      	if (this.checkboxList[this.dataList[i].city]) {
54          newList.push(this.dataList[i]);
55        }
56      }
57      return newList;
58    }
59  }
60});

JSFiddleに動くサンプルもあります

以下の点もおかしかったので直しました

<tbody>内に<p>は置けないので移動した
名古屋とFukuokaがこんがらがってた

追記 2020-3-13

なるべく元のコードをもとに修正してみました

clickAllChecked で showX を更新する処理を追加
- facilitychkに関する処理は不要だと思うので削除
clickChecked で AllChecked を更新する処理を追加

var app = new Vue({
  el: '#app',
  data: {
    dataList : [
      { id: 121, city: "Osaka" },
      { id: 123, city: "Fukuoka" },
      { id: 425, city: "Osaka" },
      { id: 645, city: "Tokyo" },
      { id: 326, city: "Osaka" },
      { id: 876, city: "Tokyo" },
      { id: 456, city: "Osaka" },
      { id: 335, city: "Osaka" },
      { id: 471, city: "Tokyo" },
      { id: 345, city: "Osaka" },
      { id: 857, city: "Fukuoka" },
      { id: 455, city: "Osaka" },
      { id: 997, city: "Osaka" },
      { id: 121, city: "Tokyo" },
      { id: 115, city: "Osaka" },
      { id: 668, city: "Fukuoka" }
    ],
    AllChecked: 0,
    show1: false,
    show2: false,
    show3: false,
  },
  methods: {  //  全てチェック機能
    clickAllChecked: function (event) {
      var actionFlg;
      if (event.target.checked == true) {
        actionFlg = true;
      } else {
        actionFlg = false;
      }
      // 各チェックを全てチェックに合わせて変更
      this.show1 = actionFlg;
      this.show2 = actionFlg;
      this.show3 = actionFlg;
    },
    clickChecked: function(event) {
      if(event.target.checked == false){
        this.AllChecked = 0;
      }
      // すべてがチェックされたら、全てチェックをチェックする
      if (this.show1 && this.show2 && this.show3) {
        this.AllChecked = 1;
      }
    }
  },

  computed: {

    filteredList: function() {  //  絞り込み機能
      var newList = [];
      for (var i=0; i<this.dataList.length; i++) {
        var isShow = true;
        if (!this.show1 && this.dataList[i].city == "Tokyo") {
          isShow = false;
        }
        if (!this.show2 && this.dataList[i].city == "Osaka") {
          isShow = false;  
        }
        if (!this.show3 && this.dataList[i].city == "Fukuoka") {
          isShow = false;
        }
        if (isShow) {
          newList.push(this.dataList[i]);
        }
      }
      return newList;
    }
  }
});

JSFiddleもあります

投稿2020/03/12 11:48

編集2020/03/12 21:13

popobot

総合スコア6586

tomato01

2020/03/12 14:58

ご回答を頂き誠にありがとうございます。私と違った方法で実装されておりとても勉強になりました！動くサンプルもどうもありがとうございました。

tomato01

2020/03/12 15:10

ちなみに、私のコードが動かなかった原因がもしお分かりでしたら教えて頂ければありがたいです。

popobot

2020/03/12 21:19 編集

すみません、確かに改修しすぎて、何が問題かわかりにくくなっちゃいましたね... なるべく元のコードをベースに修正したものを追記しました。直した部分も書いたので参考にしてください。ちなみに... 最初の回答のコードは v-model を使うなら VueのdataとHTMLのinputの値が双方向にバインディングされるので、 v-on:click を使わないように直しています。逆に全てチェックの方は v-model を使わないなら v-on:click と :checked を使うようにしています。

tomato01

2020/03/13 01:13

とても詳しく教えいただき誠にありがとうございます!v-modelとv-onを分けて使う件、とても勉強になりました。どうぞありがとうございました!

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