Cant Render custom components

[osmelg]

main.js Vue.component('CustomTextField', () => import('@/components/CustomTextField.vue') ); Page

    <v-form-base
      :model="model"
      :schema="schema"
      @input="log"
    />
     data() {
    return {
      model: {
        text: '',
      },
      schema: {
        text: { type: 'CustomTextField', label: 'Another text field' },
      },
    };
  },

Why i cant see my custom component? Using vue cli 3+, vue 2.6, vuetify 2.4

[freestyledork]

Looks like there is an issue with the mapTypeToComponent(type) method. Using global components depending on when they were added they could end up deeply nested in the proto property and would be lost with the spread operator. I changed the method like below and it worked for me. Maybe @wotamann can update the core :P

From:

    mapTypeToComponent(type) {
      // merge global registered components into typeToComponent Object
      const allTypeComponents = { ...typeToComponent, ...Vue.options.components}
      // const typeToComponent -> maps type to according v-component 
      // ie. schema:{ type:'password', ... } to specific vuetify-control or default to v-text-field'
      return allTypeComponents[type] ? allTypeComponents[type] : `v-${type}`
    },

To:

    mapTypeToComponent(type) {
      // const typeToComponent -> maps type to according v-component
      // ie. schema:{ type:'password', ... } to specific vuetify-control or default to v-text-field'
      return typeToComponent[type] || this.$options.components[type] || `v-${type}`
    },

[hputzek]

Hi @wotamann Thanks for your work at this libary! 🙏

I had a similar problem when rendering custom components: The custom component I registered worked once, but on any update to the form data, it was not found anymore (so the fallback to v- vuetify components kicked in:

[Vue warn]: Unknown custom element: <v-WallSelector> - did you register the component correctly? 

I tested @freestyledork solution (previous comment) sucessfully: Using his suggestion it works seamlessly for me.

Would be cool if you would consider including this fix in an upcoming version?

Thanks & Greetings, Hendrik

[papacarp]

Another solution that does not involve modifying the base.

1. export the component as vCustomComponent
2. include it in main.js as Vue.component('vCustomComponent', () => import('@/components/vCustomComponent.vue') )
3. use the type customComponent in your schema and let the bug add the v- to the type.

Works fine until they fix it in the base code.

[twofivelabs]

@papacarp @hputzek When using a custom component, it seems that the event handlers don't fire on them. Any thoughts on this? Similarly, if I use slots in my custom component it won't allow for those inside the v-form-base