工作中发现默认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: [] }
 },
 inheritAttrs: false,
 methods: {
 //获取父级的v-model
 getModel: function () {
 if (Array.isArray(this.value)) {
 vModel = this.value;
 }
 else {
 vModel = this.value.toString().split(",");
 }
 return vModel
 },
 //清除冗余数值
 filterModel: function (vModel) {
 var dataSource = this.dataSource;
 var canSetValue = [];
 var dataSourceValue = [];
 for (var i = 0; i < dataSource.length; i++)
 {
 dataSourceValue.push(dataSource[i].value.toString()); //需要转为字符串，兼容数字类型值
 }
 vModel.forEach(function (item, index) {
 var index = dataSourceValue.indexOf(item);
 if (index > -1) {
 canSetValue.push(item);
 }
 });
 return canSetValue;
 },
 onChange: function (event) {
 var vModel = this.getModel(); //每次触发都先获取父级的v-model，保证多个选项的数据同步，v-model初始值中可能存在冗余数据，后面需要用filterModel过滤掉冗余数据。
 if (this.dataSource.length <= 1)
 {
 vModel.splice(0, vModel.length);
 }
 var $obj = event.target;
 var index = vModel.indexOf($obj.value);
 if ($obj.checked){
 if (index < 0)
 {
 vModel.push($obj.value);
 }
 }
 else {
 if (index >= 0) {
 vModel.splice(index, 1); //数组中移除
 }
 }
 vModel = this.filterModel(vModel);//清除冗余数值
 if (!Array.isArray(this.value)) {
 vModel = vModel.join(",");//如果v-model是字符串，同步时候也转为字符串。
 }
 console.log(vModel)
 this.$emit("change",vModel);//同步父级的v-model
 },
 isChecked: function (val)
 {
 var vModel = this.getModel();
 //务必toString()后再查找，否则会和数值型不兼容。
 if (vModel.indexOf(val.toString()) > -1)
 {
 return true;
 }
 else
 {
 return false;
 }
 }
 },
 template: `<span :data-value="value">
 <label class="checkbox-inline" v-for="item in dataSource" :key=item.value> <input type="checkbox" :checked="isChecked(item.value)" v-on:change="onChange($event)" :value="item.value" v-bind="$attrs" /> {{item.label}}</label>
 </span>`
});

上面代码大家可以下载自己调试，重要地方都加了注释。

父级页面调用时候v-model直接传递字符串即可，如下：

 var formData = {Love:"写代码"};
 var vue = new Vue({
 el: "#myForm",
 data: formData,
 });

单选的调用方法

<ui-checkbox v-model="Love" v-on:change="Love=$event" :data-source="[{value:1,label:'是否有爱好'}]"></ui-checkbox>

这样就可以保证选种后Love的值为1，如果不选，值就为空，提交到后台很容易处理。

效果如下：

选中后v-mode的值同步改为1，不再是vue默认的true或false。

如果有多个选项，可以这样调用：

<ui-checkbox v-model="Love" v-on:change="Love=$event" :data-source="[{value:'read',label:'读书'},{value:'write',label:'写字'}]"></ui-checkbox>

在父级调用的时候，v-model可以传递逗号隔开的字符串，也可以直接传递数组，更具有实用性，单选时候效果如下：

两个都选中的时候，效果如下：

调用时候我们初始默认值为：{Love:"写代码"};

很明显这是一个冗余值，组件中通过 filterModel方法过滤掉了。

如果你想按vue默认的方式来工作，那么初始默认值可以改为数组形式：

var formData = {Love:[]};

这样点击触发后传递出来的就是数组，效果如下：

以上是本人今天工作项目中封装的一个小组件，希望大家喜欢，欢迎转发。

vue教程：封装了一个checkbox组件

单选的调用方法

如果有多个选项，可以这样调用：