Start with

Key Examples

Here is a Playground with Key-Examples

GithubProject

Clone or download this Github-Project, change current directory to ./vuetify-form-base/example and then run

npm install

npm run serve

HTML-File

Download and open this HTML-File in your Browser

Fiddle

Try a simple example with Fiddle

Vue-File

In order for your application to work correct, you must wrap it in a v-app component. This component is required and can exist anywhere inside the body, but must be the parent of ALL Vuetify components. v-main needs to be a direct descendant of v-app.

// HTML
<template>
  <v-app>
    <v-main>
      <v-container fluid>
        <v-form>
          
          <!-- vuetif-form-base component -->
          <v-form-base :model="Model" :schema="Schema" @input="handleInput"/>
        
        </v-form>
      </v-container>   
    </v-main>
  </v-app>
</template>

// Javascript
import VFormBase from 'vuetify-form-base'
  
export default {    
  components:{ VFormBase },
  data () {
    return {
      Model: {
        name: 'Stoner',
        position: 'Admin',
        tasks: [
          { 
            done: true,
            title: 'make refactoring' 
          },
          { 
            done: false,
            title: 'write documentation'  
          },
          { 
            done: true,
            title: 'remove logs'  
          }        
        ]
      },
      Schema: {
        name: { type:'text', label:'Name' },
        position: { type:'text', label:'Position' },
        tasks: { 
            type: 'array',
            schema: { 
                done:{ type:'checkbox', label:'done', col:3}, 
                title:{ type:'text', col:9 }
            } 
        }
      }
    }
  },
  methods:{
    handleInput( ev ){
      console.log( ev ) 
    }
  }
}

and you will get this editable Form