leboeuf / vue-forms

Turns JSON into pretty forms using Vue 3 and Tailwind CSS.
2 stars 0 forks source link

TypeError: componentList.push is not a function #1

Open focussing opened 2 years ago

focussing commented 2 years ago

I am adding a form to an existing large app which is using Vue3 but not the composition api, and Vite2

<template>
    <Form :schema="schema" />
</template>

In the data section I use your example schema object.

data: () => ({
        schema : {
            product: {
                type: 'heading',
                label: 'product',
                schema: {
                    id: {
                        label: 'id',
                        type: 'text',
                        readonly: true,
                        value: '169c7c42-e93d-4ca4-9be5-63fea0532681'
                    },
                    name:
                    {
                        label: 'name',
                        type: 'text',
                        placeholder: 'Name'
                    }
                }
            }
        }
    }),

The folowing is shown in the console:

runtime-core.esm-bundler.js:6568 [Vue warn]: Unhandled error during execution of mounted hook at <Form schema= {product: {…}} > at <Beheer onVnodeUnmounted=fn ref=Ref< Proxy {clickButton: ƒ, addRow: ƒ, getRows: ƒ, updateRow: ƒ, deleteRow: ƒ, …} > > at at

And:

Uncaught (in promise) TypeError: componentList.push is not a function at Form.vue:69 at Array.forEach () at generateControls (Form.vue:41) at Form.vue:74 at Array.forEach () at generateControls (Form.vue:41) at callWithErrorHandling (runtime-core.esm-bundler.js:6685) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6694) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6704) at Array.hook.weh.hook.weh (runtime-core.esm-bundler.js:1948)

Could you help me please?

maximeleboeuf-centris commented 2 years ago

Hi Raymond,

The components have evolved but I forgot to fix the example on the README. Try replacing type: 'heading' by type: 'section' to see something.

This is a very alpha library so don't expect to be too impressed. You'll probably find you that can't use it "as-is" in your own project. But I encourage you to check the source, it's not much code, you can probably replicate something similar for yourself.

If you have some time to write a reply, I'd be interested in knowing what you need this library for. This would help me develop it into something more useful.