孤独プログラマー譚

孤独死が近い。

Vue.js 複数チェックボックスを全て選択で切り替え

よくある「全て選択」チェックボックス

f:id:halation-summer:20190112075758g:plain

<div id="app">
  <div v-for="(item, index) in items">
    <input type="checkbox" :value="item" v-model="checked_items">{{ labels[index] }}
  </div>
  <div>{{ checked_items }}</div>
  <input type="checkbox" v-model="checked_all">check_all<br>
  <div>{{ checked_all }}</div>
</div>
new Vue({
  el: '#app',
  data: {
    items: ['value1', 'value2', 'value3'], // 全てのvalue値
    labels: ['label1', 'label2', 'label3'],
    checked_items: ['value2'], // 初期値
  },
  computed: {
    checked_all: {
      get () {
        return this.checked_items.length === this.items.length
      },
      set (checked) {
        this.checked_items = checked ? this.items : []
      },
    },
  },
})


以下の部分は、サーバーサイドレンダリングで配列に値をつっこんでもいいし、
AJAXで取得してきてもいい。

data: {
  items: ['value1', 'value2', 'value3'], // 全てのvalue値
  labels: ['label1', 'label2', 'label3'],
  checked_items: ['value2'], // 初期値
},