Custom Components

Define Custom-Component

Implement your own component like this

<template>
  <div class="ma-3 pa-4 grey lighten-3">
    <v-text-field v-model="input" label="obj.schema.label"></v-text-field>  
    <br>
    type: {{type}}
    <br>
    value: {{value}}
    <br>
    obj: {{obj}}
  </div>
</template>

// customComponent.vue
<script>
export default {
  name:'customComponent',  
  props: ['type','value', 'obj'],  
  computed:{
    input:{
      get(){  return this.value},
      set(val){ this.$emit('input', val)}  // listen to @input="handler"
    }
  }  
}
</script>

Use Custom-Component

First register your custom component globally in main.js

 // main.js
 // You have to register your Custom-Control Component globally in 'main.js'
 // See: https://vuejs.org/v2/guide/components-registration.html
 
 Vue.component('customComponent', () => import('@/components/customComponent.vue') )
 
 // type:'customComponent' splits to custom-omponent
 // Case-sensitive attribute names don't work with v-bind 
 // https://github.com/vuejs/vue/issues/4212
 

and then use your custom-component in seCustomComponents.vue

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

// UseCustomComponents.vue
<script>
import VFormBase from '@/components/vFormBase'

/* IMPORTANT !!!
  // You have to register your Custom-Control Component globally in 'main.js'
  // See: https://vuejs.org/v2/guide/components-registration.html
  
  // main.js
  Vue.component('customComponent', () => import('@/components/customcomponent-basic.vue') )
  
  // type:'customComponent' splits to custom-omponent
  // Case-sensitive attribute names don't work with v-bind 
  // https://github.com/vuejs/vue/issues/4212
*/

export default {
  components: { VFormBase},
  name:'UseCustomComponents',
  data () {
    return {
      myModel: {
        custom: 'base',
        // ...
      },
      mySchema: {
        //    ### HERE USE YOUR CUSTOM COMPONENT ####
        custom: { type: 'customComponent', label:'My Component' },
        //...
      }
    }
  },
  methods: {
    log( {  on, id, key, value, params, obj, data, schema, parent, index, event } ){
      // destructure the signature object 
      console.log(on, key, value)
    }    
  }
}
</script>

Example