请问该如何使用Vue.js进行列表的双向绑定？

Question

如何使用Vue.js进行列表的双向绑定

Answer 1

双向绑定可以绑定到同一个数组<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 的 valuereturn this.list.filter(item => item.checked).map(item => item.value)}}

Answer 2

如果只是分别实现双向绑定和初始化渲染，官网的例子都可以解决。 双向绑定可以绑定到同一个数组Jack、John、Mike 。Checked names: {{ checkedNames | json }} 这样可以不做任何处理，获得所有checked的checkbox。