Update checkbox to support trueValue and falseValue

This commit is contained in:
Rijn 2017-08-09 09:54:31 -05:00
parent f3c6cd68d1
commit a81253ecd4
2 changed files with 31 additions and 8 deletions

View file

@ -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 () {

View file

@ -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();
}
}