タイトルが長くなりましたが、前々からVue.jsのチェックボックスでハマることが多かったのでメモです。

環境


Vue.js 2.5.2

やりたいこと


下記のような感じにしたい。

  • 複数のチェックボックス
  • チェック・アンチェックで他のチェックボックスに影響を及ぼさないこと
  • チェック・アンチェックの見た目が反転しない
    • どうもブラウザごとに挙動が違う
    • チェックついてないのに内部的にtrueになる場合がある。逆も然り。
    • @clickとかv-modelとかv-bind:valueだとダメだった

んで、できれば初期値はAPIから取得してチェック・アンチェックでAPIにPATCH投げるような感じがいいですね。というわけで、続けて実装です。

実装


以下、雑な実装です。なお、動くかどうか試してないのでたぶんコピペだと動かないと思います。

まず、HTMLは下記のような感じにします。ここは前述のとおり@clickとかv-modelとかv-bind:valueとかを組み合わせて試したのですが、思うように動いたのは@changev-bind:checkedの組み合わせでした。

1
<div id="example">
2
  <input type="checkbox" @change="toggleCheckBox1()" v-bind:checked="checkBoxExample.checkbox1">テスト1</input>
3
  <input type="checkbox" @change="toggleCheckBox2()" v-bind:checked="checkBoxExample.checkbox2">テスト2</input>
4
  <input type="checkbox" @change="toggleCheckBox3()" v-bind:checked="checkBoxExample.checkbox3">テスト3</input>
5
</div>

次にJS側です。このチェックボックス群はビジネスロジック的に一つのかたまりなのでクラスで状態管理とか、その他ごにょごにょします。後は特筆することはないですね。

1
// チェックボックスの状態管理とか更新するためのクラス
2
class CheckBoxExample {
3
  constructor(_checkbox1, _checkbox2, _checkbox3) {
4
    this.checkbox1 = _checkbox1;
5
    this.checkbox2 = _checkbox2;
6
    this.checkbox3 = _checkbox3;
7
  }
8
9
  toggleCheckBox1() {
10
    this.checkbox1 = !this.checkbox1
11
    // なんかの処理...API叩くとか
12
  }
13
14
  toggleCheckBox2() {
15
    this.checkbox2 = !this.checkbox2
16
    // なんかの処理...API叩くとか
17
  }
18
  
19
  toggleCheckBox3() {
20
    this.checkbox3 = !this.checkbox3
21
    // なんかの処理...API叩くとか
22
  }
23
24
}
25
26
const app = new Vue({
27
  el: "example",
28
  data: {
29
    checkBoxExample = null;
30
  },
31
  created: function() {
32
    let checkBoxStates = null;
33
    // Vue.jsのインスタンス生成時にAPIでデータ取ってきて初期値設定みたいな
34
    fetch('/api/checkboxstate')
35
    .then((response) => {
36
      checkBoxStates = JSON.parse(response); //たぶんこの辺動かないんじゃないかと思う
37
    }
38
    this.checkBoxExample = new CheckBoxExample(
39
      checkBoxStates.checkbox1,
40
      checkBoxStates.checkbox2,
41
      checkBoxStates.checkbox3
42
    );
43
  },
44
  methods: {
45
    toggleCheckBox1() {
46
      this.checkBoxExample.toggleCheckBox1();
47
    },
48
    toggleCheckBox2() {
49
      this.checkBoxExample.toggleCheckBox2();
50
    },
51
    toggleCheckBox3() {
52
      this.checkBoxExample.toggleCheckBox3();
53
    }
54
  }
55
});

適当な記事になってしまいましたが、個人向けメモなので勘弁して下さい。

その他


なんかVue.jsのいろんなサンプルとか見てもみんなdataに配列とかでベタベタ書いてるんですけど、それ普通なんすか??クラス使いたくない??使いたくないの??