vue.js - vuejs怎样实现列表中checkbox的双向绑定及初始化渲染?
本文介绍了vue.js - vuejs怎样实现列表中checkbox的双向绑定及初始化渲染?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
如果只是分别实现双向绑定和初始化渲染,官网的例子都可以解决。
双向绑定可以绑定到同一个数组
<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'}]
}
});
请问,如何既能保证初始化v-for时候渲染checkbox。又能方便快捷的获取所有选中的checkbox的值?
解决方案
其實可以利用 filter
, map
來輕鬆完成你要的功能
methods: {
getChecked: function() {
// 先透過 filter 篩選出 checked 為 true 的 item
// 在透過 map 只回傳 item 的 value
return this.list.filter(item => item.checked).map(item => item.value)
}
}
實現
这篇关于vue.js - vuejs怎样实现列表中checkbox的双向绑定及初始化渲染?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文