Support trueValue and falseValue for radio

This commit is contained in:
Rijn 2017-08-09 10:07:38 -05:00
parent a81253ecd4
commit d24f508248
2 changed files with 25 additions and 9 deletions

View file

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

View file

@ -22,7 +22,15 @@
mixins: [ Emitter ], mixins: [ Emitter ],
props: { props: {
value: { value: {
type: Boolean, type: [String, Number, Boolean],
default: false
},
trueValue: {
type: [String, Number, Boolean],
default: true
},
falseValue: {
type: [String, Number, Boolean],
default: false default: false
}, },
label: { label: {
@ -83,7 +91,9 @@
const checked = event.target.checked; const checked = event.target.checked;
this.currentValue = 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) { if (this.group && this.label !== undefined) {
this.parent.change({ this.parent.change({
@ -92,16 +102,19 @@
}); });
} }
if (!this.group) { 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 () { updateValue () {
this.currentValue = this.value; this.currentValue = this.value === this.trueValue;
} }
}, },
watch: { watch: {
value () { value (val) {
if (val !== this.trueValue && val !== this.falseValue) {
throw 'Value should be trueValue or falseValue.';
}
this.updateValue(); this.updateValue();
} }
} }