# Examples
# Basic Inputs
Full list of built-it components can be found here.
JSON Schema
Data Model
# Nested Object
Nesting objects is supported. If you want to omit nested object's property name displayed - set it's title property to empty string.
JSON Schema
Data Model
# Array of Objects
To specify schema for each array element, provide items parameter inside array parameter schema.
JSON Schema
Data Model
# Validations
Supported rules: minLength and maxLength for strings, minimum and maximum for numbers.
JSON Schema
Data Model
# Conditions
If condition is met, schema is merged with schema inside then. Minimum length (minLength) and equality (const) conditions are supported. Also oneOf (condition is met if only one if is met) and allOf (condition is met if all ifs are met) combinations can be used. This is usefull when you want to display different parts of schema based on some parameter's value or when you want to validate some parts of the schema conditionally.
Try typing in Vue.
JSON Schema
Data Model
oneOf usage example. Condition is met when a is Vue or React.
JSON Schema
Data Model
allOf usage example. Condition is met when a is Vue and c is true.
JSON Schema
Data Model
allOf can also be used on the top level to implement multiple conditions. Try setting a to Vue and to React.
JSON Schema
Data Model
# Default Values
Sometimes, usually when initializing a new data instance, you would want to use some default values. Full data model object with default values is emitted after initialization through a @init-default event.
<JsonSchema :schema="schema" v-model="dataModel" @init-default="dataModel = $event"/>
JSON Schema
Data Model
# UI Schema
# Using specific UI component
JSON Schema
Data Model
UI Schema
# Setting display order
Setting order property in UI schema will set the order for displaying corresponding components. The bigger order - the higher the component will be displayed.
JSON Schema
Data Model
UI Schema
# Custom Components
Example showcases usage with some Vuetify components. Using uiSchema is a convinient way to use specific components for some use-cases (e.g. Datepicker).
JSON Schema
Data Model
UI Schema
2020
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Components Config
# Custom Wrapper Component
In this case we use CustomWrapper.vue as componet to align labels and inputs horizontally.
JSON Schema
Data Model
Username
Use Avatar
Account Type
CustomWrapper.vue
Wrapper Config
← Guide