工作中发现默认vue绑定checkbox很不方便，存在下面几个问题。
1、如果传递的数值不是数值，那默认绑定值就会转为true或false但是作为后端人员，true或flase这类值一般都是用数值型字段来保存，比如1和0，我们后台传递出来的数据往往就直接是0或1.
2、如果有多个checkbox，那就需要传递的数值是数组，但是实际中往往一组checkbox提交后台后，就是保存在一个nvarchar字段中，如果需要和前台配合，在读取的时候就需要把字符串转为数组才能实现双向绑定。
基于以上原因，封装了一个checkbox组件，代码如下，希望对大家有帮助。
//ui-checkbox组件
Vue.component("ui-checkbox", {
props: {
value: { default: "" },
dataSource: { default: []}
},
data:function(){
return {
checkedModel:this.value
}
},
watch:{
value:function (newValue)
{
if (Array.isArray(newValue))
{
this.checkedModel = newValue;
}
else
{
this.checkedModel = newValue.toString().split(",");
}
}
},
methods: {
onChange: function(event)
{
if (this.dataSource.length <= 1)
{
//如果数据源只有一个，清除所有数组，保证干净的数据传递到后台。
this.checkedModel.splice(0,this.checkedModel.length);
}
var $obj = event.target;
if ($obj.checked)
{
if (this.checkedModel.indexOf($obj.value)<0)
{
this.checkedModel.push($obj.value);
}
}
else
{
this.checkedModel.Remove($obj.value);
}
console.log(this.checkedModel)
}
},
created: function () {
if (Array.isArray(this.value)) {
this.checkedModel = this.value
}
else {
this.checkedModel = this.value.toString().split(",");
}
},
template:`<span :data-value="checkedModel">
<label class="checkbox-inline" v-for="item in dataSource" :key=item.value> <input type="checkbox" v-on:change="onChange($event)" :value="item.value" /> {{item.label}}</label>
</span>`
});
单选的调用方法
<ui-checkbox v-model="CanExpand" v-on:change="CanExpand=$event" :data-source="[{value:1,label:'是否选中'}]"></ui-checkbox>
这样就可以保证选种后CanExpand的值为1，如果不选，值就为空，在后台很容易处理。
如果有多个选项，可以这样调用：
<ui-checkbox v-model="Love" v-on:change="Love=$event" :data-source="[{value:'red',label:'读书'},{value:'write',label:'写字'}]"></ui-checkbox>
在父级调用的时候，v-model可以传递逗号隔开的字符串，也可以直接传递数组，更具有实用性。
以上是本人工作中的一些小技巧，欢迎大家关注转发并讨论。
