From Schema to Component

How to control your component through scheme properties

Vuetify Component Attribute - Schema Property

How does schema properties correspond to the Vuetify component attributes? Props in Vuetify-Controls in kebab-case must be converted to camelCase in Schema-Definition.

  schema: { 
    name: { 
      type:'text', 
      backgroundColor:'red', 
      clearable:true 
    }  
  }

type 'text' maps to component <v-text-field>

	<v-text-field background-color="red" clearable=true></v-text-field>

another example

<v-text-field 
    label="Search" 
    hint="Books" 
    prepend-icon="search" 
    clearable 
/>
</v-text-field>

// schema properties corresponds to attributes in <v-text-field> 
schema: { 
  myTextField: { 
    type:'text', 
    label:'Search', 
    hint:'Books', 
    prependIcon:'search', // camelCase 
    clearable:true 
  } 
}

complex example

// Partials Functions for Rules
const minLen = l => v => (v && v.length >= l) || `min. ${l} Characters`
const maxLen = l => v => (v && v.length <= l) || `max. ${l} Characters`

//...
schema: {
    password: { 
        type: 'password', 
        label: 'Password', 
        hint:'Between 6-12 Chars', 
        appendIcon: 'visibility', 
        counter: 12, 
        rules: [ minLen(6), maxLen(12) ], 
        clearable: true, 
        col: 12 
    }
}