Here you will find a few examples on how you can set up your
schema and the output it would produce.
We are using a few different example custom components to showcase, but you should use your own! These components are only for demonstration purposes, and are not included with the library.
# SchemaForm with useSchemaForm
This example showcases the simplest way to use
It provides the component with a
# Nested schemas
SchemaForm is able to parse and display forms that are based on nested schemas. In the example below, you can see how the
work property is an object that uses
SchemaForm itself as a component, and provides a
schema property of its own.
Further down the tree inside
details, yet another level of nested data can be found.
# Using an array based schema
SchemaForm allows you to construct the schema also as an array. The name of each field is declared as a
model property in each element, instead of it being the
key for each property of the object-type schema.
Don't forget to check out the documentation for Array schemas
# Conditional computed schemas
In the following example we showcase how a computed property can be used to dynamically generate a schema. When switching the value from the select element from A to B, the related
input also changes to reflect the current status of the schema and the form.
# Conditional fields with schema
The above example can also be written using the
condition schema keyword introduced in 3.1.0.
# 100 nested inputs
The following example showcases the power of
useSchemaForm, and why we decided to drop v-model in favor of an injected state. We recursively nest 100 schemas with input elements inside of them. Updating the v-model binding on the
FormText component does not re-trigger a re-render of any part of the generated schema, and neither does updating the schema by adding or removing levels.