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

2025-03-06 21:15:03
推荐回答(1个)
回答1:

双向绑定可以绑定到同一个数组









Checked names: {{ checkedNames | json }}
这样可以不做任何处理,获得所有checked的checkbox。

可是如果需要初始化渲染,一部分checkbox被预选中,v-model需要绑定一个boolen值checked:







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)
}
}