雙向綁定可以綁定到同一個數組

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames | json }}</span>
這樣可以不做任何處理，獲得所有checked的checkbox。

可是如果需要初始化渲染，一部分checkbox被預選中，v-model需要綁定一個boolen值checked:

<tr v-for="item in list">
<td>
<input type="checkbox" :value="item.value" v-model="item.checked" />
</td>
</tr>

new Vue({
el: 'body',
data: {
list: [{checked:true,value:'a'},{checked:false,value:'b'}]
}
});
利用 filter ， map 來完成

methods: {
getChecked: function() {
// 先透過 filter 篩選出 checked 為 true 的 item
// 在透過 map 只回傳 item 的 value
return this.list.filter(item => item.checked).map(item => item.value)
}
}

如果只是分別實現雙向綁定和初始化渲染，官網的例子都可以解決。 雙向綁定可以綁定到同一個數組Jack、John、Mike 。
Checked names: {{ checkedNames | json }} 這樣可以不做任何處理，獲得所有checked的checkbox。