工作中發現默認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 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可以傳遞逗號隔開的字符串，也可以直接傳遞數組，更具有實用性。
以上是本人工作中的一些小技巧，歡迎大家關注轉發並討論。