Update checkbox to support trueValue and falseValue

Rijn
1 parent f3c6cd68
Showing 2 changed files with 31 additions and 8 deletions Show diff stats
examples/routers/checkbox.vue
src/components/checkbox/checkbox.vue
 <template>
     <div>
+        <div>
+            <Checkbox true-value="true" false-value="false" v-model="testValue1">test string</Checkbox>
+            {{ testValue1 }}
+        </div>
+        <div>
+            <Checkbox :true-value="0" :false-value="1" v-model="testValue2">test number</Checkbox>
+            {{ testValue2 }}
+        </div>
         <Checkbox-group v-model="fruit">
-            <Checkbox v-for="item in tags" :label="item.label" :key="item"></Checkbox>
+            <Checkbox v-for="item in tags" :label="item.label" :key="item.label" true-value="true"></Checkbox>
         </Checkbox-group>
         <div>{{ fruit }}</div>
     </div>
@@ -12,7 +20,9 @@
             return {
                 social: ['facebook', 'github'],
                 fruit: ['苹果'],
-                tags: []
+                tags: [],
+                testValue1: null,
+                testValue2: null
             }
         },
         mounted () {
@@ -36,7 +36,15 @@
                 default: false
             },
             value: {
-                type: Boolean,
+                type: [String, Number, Boolean],
+                default: false
+            },
+            trueValue: {
+                type: [String, Number, Boolean],
+                default: true
+            },
+            falseValue: {
+                type: [String, Number, Boolean],
                 default: false
             },
             label: {
@@ -102,21 +110,26 @@
                 const checked = event.target.checked;
                 this.currentValue = checked;
-                this.$emit('input', checked);
+
+                let value = checked ? this.trueValue : this.falseValue;
+                this.$emit('input', value);
                 if (this.group) {
                     this.parent.change(this.model);
                 } else {
-                    this.$emit('on-change', checked);
-                    this.dispatch('FormItem', 'on-form-change', checked);
+                    this.$emit('on-change', value);
+                    this.dispatch('FormItem', 'on-form-change', value);
                 }
             },
             updateModel () {
-                this.currentValue = this.value;
+                this.currentValue = this.value === this.trueValue;
             }
         },
         watch: {
-            value () {
+            value (val) {
+                if (val !== this.trueValue && val !== this.falseValue) {
+                    throw 'Value should be trueValue or falseValue.';
+                }
                 this.updateModel();
             }
         }