Tip! This option plays nicely with transition and transition-group! See example at the bottom.
Sometimes a field is only relevant if some condition is met. The displayOptions property uses JSON Schema to evaluate if a field should be visible or not. If there are no errors then the field is shown.
There are 2 options: Full and Single.
Full
The full model uses the entire form model as data.
The above is essentially doing the following validation with Ajv
constschema= { type: object, properties: { firstName: { type:'string', minLength:3 } }, required: ['firstName']};constdata= {// Entire form model firstName, lastName, address,...}// If there are no errors in ajv.errors then the field is shownajv.validate(schema, data);
Single
The Full option can be a bit verbose when you only rely on a single field's model, and thus you set the model property on the displayOptions object to only use the value of that field's model.
// Option 2 - single modeldata() {return { uiSchema: [{ component:'div', children: [{ component:'div', displayOptions: {// Here we set to use the firstName model as the value to evaluate the schema against model:'firstName', schema: { type:'string', minLength:3 } } }] }] }}
Usage with transitions
To get some nice transitions all that is needed is to nest the component in a transition or transition-group field. Check out the Vue.js guide on transitions for more info.
data() {return { uiSchema: [{ component:'transition', fieldOptions: {// Set the name prop to `fade` props: { name:'fade',// Any transition props such as `enter-class`// enterClass: '' }, on: {// Even javascript hooks are availableenter: (el) => {console.log('hello!') },leave: (el) => {console.log('goodbye!'); } } }, children: [{ component:'div', displayOptions: { model:'firstName' schema: { type:'string', minLength:3 } } }] }] }}