Vue.js 複数チェックボックスを全て選択で切り替え
よくある「全て選択」チェックボックス。
<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'], // 初期値 },