This release adds the support of multiple checkbox and grouped radio elements and fix some bugs.
API Update
- Add a new method to get the form's reference:
vm.form()
- Remove prop
dataClassError
- Rename prop
itemClass
toinputWrappingClass
Multiple Checkbox elements
To define multiple checkbox, use the JSON Schema keyword anyOf
:
schema.json
{
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"properties": {
"multipleCheckbox": {
"type": "array",
"anyOf": [
{ "value": "daily", "label": "Daily New" },
{ "value": "promotion", "label": "Promotion" }
]
}
}
}
component.vue
<script>
import FormSchema from 'vue-json-schema'
FormSchema.setComponent('select', 'el-select', ({ item }) => {
return { label: item.value }
})
FormSchema.setComponent('checkboxgroup', 'el-checkbox-group')
export default { ... }
</script>
Grouped Radio elements
To group radio elements, use the JSON Schema keyword enum
and attrs.type === 'radio'
:
schema.json
{
"$schema": "http://json-schema.org/draft-04/schema#",
"type": "object",
"properties": {
"groupedRadio": {
"type": "string",
"enum": [
{ "value": "daily", "label": "Daily New" },
{ "value": "promotion", "label": "Promotion" }
],
"attrs": {
"type": "radio"
}
}
}
}
component.vue
<script>
import FormSchema from 'vue-json-schema'
FormSchema.setComponent('select', 'el-radio', ({ item }) => {
return { label: item.value }
})
FormSchema.setComponent('radiogroup', 'el-radio-group')
export default { ... }
</script>
Bugs fix
- Fix input initialization of checkbox, radio and select #34
- Fix reactivity on checkbox, radio and select elements
- Fix displaying of the message error
Bracking changes
- Change prototype
vm.setComponent(type, component[, props = (vm, field) => ({}))
tovm.setComponent(type, component[, props = ({ vm, field }) => ({}))
.