⚪
Vuetify-Form-Base
  • Introduction
  • News & Changes
  • Quickstart
    • Start with
    • Installation
    • Intro
    • Features
    • License
  • Form
    • Validation
  • Component
    • Async Loading
    • Attributes
    • From Schema to Component
    • Events
    • Grid
    • Slots
    • CSS
    • Custom Components
    • Tooltips
  • Schema
    • General
    • Autogeneration
    • Computed Schema
    • Display & Typography
    • Grouping Controls
    • Arrays
  • Input & Controls
    • Text-Field & Input
    • Checkbox, Switch & Sliders
    • Radio Buttons
    • Buttons
    • Select, Combo & Autocomplete
    • Lists & Treeviews
    • Date, Time & Color
    • Icons & Images
Powered by GitBook
On this page
  • Model - Schema
  • Model
  • Schema - Shorthand Definition
  • Schema - Definition

Was this helpful?

  1. Quickstart

Intro

PreviousInstallationNextFeatures

Last updated 4 years ago

Was this helpful?

Model - Schema

vuetify-form-base comes as a singular File, is a and can be integrated into any Vue Project.

<v-form-base :model="myModel" :schema="mySchema" @input="handleInput" />

Schema can have an ident Structure as Model. Create a Schema by copying the Model-Object and replace the Values of the Model-Object by Definitions for your your Schema.

Model

Model can be any Object, which could be nested and can contain Arrays

Model: {
    name: 'base',
    details: {
        one: ['a','b','c'],
        two: { 
            a:true, 
            b:false 
        }
    }
}

Schema: {
    name:'text',
    details: { 
        one:{ type:'array' },
        two: { 
            a:'checkbox'  // shorthand for { type:'checkbox', label:'a']
            b:'checkbox'  // shorthand for { type:'checkbox', label:'b']
        }
    }
}

Schema - Shorthand Definition

Model:{
    name:'Base'
}
...
Schema{
    name:'text'  
    // shorthand for 
    // name:{ type:'text', label:'name' }
}

Schema - Definition

Based on an existing Model vuetify-form-base generates a full editable Form using defined Schema. Layout and Functionality are defined in a Schema-Object, which has the same Property structure as the Model-Object. Your Data-Object keeps full reactive and any Input or Change in your Form triggers an Event too.

If you have a deep nested Model-Object including any Array-Structure you can direct work on it. There is no need to flatten or modify your Data Presentation.

Changing any Field in the Form gives you a reactive Result in your Model-Object. Furthermore you can synchronize two or more Forms by using same Model-Object.

If you want a Partial-Form which displays only parts of your Data.Object, then link a property of your Model-Object to your vuetify-form-base Component.

And if necessary you can also build a Form in Form by using Slots.

The corresponding Schema-Object defines Type, Layout and Functional behaviour of the Vuetify-Controls in your Form. The styles your Form. The Controls have a clear design, but don't worry if you need more you can change Style and Layout. For more Details see Section

Component Framework Vuetify 2.0
CSS
Vue Component