Merge pull request #1573 from rijn/1191

Support trueValue and falseValue

examples/routers/checkbox.vue

@@ -1,7 +1,15 @@
 <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 () {

examples/routers/radio.vue

@@ -1,11 +1,13 @@
 <template>
     <div>
+        <Radio true-value="true" false-value="false" v-model="testValue">test</Radio> {{ testValue }}
         <Radio-group v-model="date.sex">
             <div v-if="show">
-                <Radio label="male"></Radio>
+                <Radio label="male" true-value="true" false-value="false"></Radio>
-                <Radio label="female"></Radio>
+                <Radio label="female" true-value="true" false-value="false"></Radio>
             </div>
         </Radio-group>
+        {{ date }}
         <Button @click="handleChange">change</Button>
     </div>
 </template>
@@ -16,7 +18,8 @@
                 date: {
                     sex: 'male'
                 },
-                show: false
+                show: false,
+                testValue: null
             }
         },
         methods: {

src/components/checkbox/checkbox.vue

@@ -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.$emit('on-change', value);
-                    this.dispatch('FormItem', 'on-form-change', checked);
+                    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();
             }
         }

src/components/radio/radio.vue

@@ -22,7 +22,15 @@
         mixins: [ Emitter ],
         props: {
             value: {
-                type: Boolean,
+                type: [String, Number, Boolean],
+                default: false
+            },
+            trueValue: {
+                type: [String, Number, Boolean],
+                default: true
+            },
+            falseValue: {
+                type: [String, Number, Boolean],
                 default: false
             },
             label: {
@@ -83,7 +91,9 @@
 
                 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.label !== undefined) {
                     this.parent.change({
@@ -92,16 +102,19 @@
                     });
                 }
                 if (!this.group) {
-                    this.$emit('on-change', checked);
+                    this.$emit('on-change', value);
-                    this.dispatch('FormItem', 'on-form-change', checked);
+                    this.dispatch('FormItem', 'on-form-change', value);
                 }
             },
             updateValue () {
-                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.updateValue();
             }
         }