Update checkbox to support trueValue and falseValue
This commit is contained in:
parent
f3c6cd68d1
commit
a81253ecd4
2 changed files with 31 additions and 8 deletions
|
@ -1,7 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<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-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>
|
</Checkbox-group>
|
||||||
<div>{{ fruit }}</div>
|
<div>{{ fruit }}</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -12,7 +20,9 @@
|
||||||
return {
|
return {
|
||||||
social: ['facebook', 'github'],
|
social: ['facebook', 'github'],
|
||||||
fruit: ['苹果'],
|
fruit: ['苹果'],
|
||||||
tags: []
|
tags: [],
|
||||||
|
testValue1: null,
|
||||||
|
testValue2: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|
|
@ -36,7 +36,15 @@
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
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: {
|
||||||
|
@ -102,21 +110,26 @@
|
||||||
|
|
||||||
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) {
|
if (this.group) {
|
||||||
this.parent.change(this.model);
|
this.parent.change(this.model);
|
||||||
} else {
|
} 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 () {
|
updateModel () {
|
||||||
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.updateModel();
|
this.updateModel();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue